blocks|key|214148|text|有几种方法，其中一些比另一些更高级，但在您的示例中，ng-hide可以做到这一点。请参阅http://jsfiddle.net/roytruelove/g75XQ/3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|214149|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/roytruelove/g75XQ/3/^0|18|14|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There are a few ways, some more advanced than others, but in your case ng-hide does the trick. See <a href="http://jsfiddle.net/roytruelove/g75XQ/3/" rel="nofollow">http://jsfiddle.net/roytruelove/g75XQ/3/</a>

blocks|key|3067778|text|你可以使用manual+initialization来推迟angular应用的初始化，而不是使用ng-app属性来自动初始化。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3067779|//+define+some+service+that+has+`$window`+injected+and+read+your+data+from+it
angular.service('myService',+['$window',+($window)+=>({+++
++++++getData()+{
++++++++++return+$window.myData;
++++++}
}))++++

const+callService+=+(cb)+=>+{
+++$.ajax(...).success((data)=>{
+++++++++window.myData+=+data;
+++++++++cb(data)
+++})
}

//+init+angular+app+
angular.element(document).ready(function()+{
+++++++callService(function+(data)+{
++++++++++doSomething(data);
++++++++++angular.bootstrap(document);
+++++++});
});|code-block|syntax|javascript|3067780|其中callService是执行AJAX调用并接受成功回调的函数，它将初始化angular应用程序。|3067781|还要检查ngCloak指令，因为它可能包含了您需要的所有内容。|3067782|或者，在使用ngRoute时，您可以使用resolve属性，因此您可以看到@honkskillet答案|3067783|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/guide/bootstrap#manual-initialization|1|https://docs.angularjs.org/api/ngRoute^0|1C|6|5|L|0|0|0|2|B|0|4|7|0|K|7|6|7|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

You can defer init of angular app using <a href="https://docs.angularjs.org/guide/bootstrap#manual-initialization" rel="nofollow noreferrer">manual initialization</a>, instead of auto init with <code>ng-app</code> attribute.

<pre><code>// define some service that has `$window` injected and read your data from it
angular.service('myService', ['$window', ($window) =&gt;({ 
 getData() {
 return $window.myData;
 }
})) 

const callService = (cb) =&gt; {
 $.ajax(...).success((data)=&gt;{
 window.myData = data;
 cb(data)
 })
}

// init angular app 
angular.element(document).ready(function() {
 callService(function (data) {
 doSomething(data);
 angular.bootstrap(document);
 });
});
</code></pre>

where <code>callService</code> is your function performing AJAX call and accepting success callback, which will init angular app.

Also check <code>ngCloak</code> directive, since it maybe everything you need.

Alternatively, when using <a href="https://docs.angularjs.org/api/ngRoute" rel="nofollow noreferrer">ngRoute</a> you can use <code>resolve</code> property, for that you can see @honkskillet answer

blocks|key|212870|text|正如我在评论中所说，在控制器中处理卸载状态会容易得多，您可以从$q中受益，从而使这一点变得非常简单：http://jsfiddle.net/g/g75XQ/4/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|212871|如果您想在加载用户时在控制器中创建一些内容：http://jsfiddle.net/g/g75XQ/6/|212872|编辑:要延迟路由更改，直到加载了某些数据，请查看以下答案：Delaying+AngularJS+route+change+until+model+loaded+to+prevent+flicker|212873|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/g/g75XQ/4/|1|http://jsfiddle.net/g/g75XQ/6/|2|https://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker^0|1E|U|0|0|M|U|1|0|T|1X|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

As I said in the comments, it would be a lot easier to handle an unloaded state in your controller, you can benefit from $q to make this very straightforward: 
<a href="http://jsfiddle.net/g/g75XQ/4/" rel="nofollow noreferrer">http://jsfiddle.net/g/g75XQ/4/</a>

if you want to make something in the controller when user is loaded: <a href="http://jsfiddle.net/g/g75XQ/6/" rel="nofollow noreferrer">http://jsfiddle.net/g/g75XQ/6/</a>

EDIT: To delay the route change until some data is loaded, look at this answer: <a href="https://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker">Delaying AngularJS route change until model loaded to prevent flicker</a>

blocks|key|209787|text|甚至比手动引导更好(这也不总是一个坏主意)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|209788|angular.module('myApp',+['app.services'])
+++.run(function(myservice)+{
++++++//stuff+here.
+++});|code-block|syntax|javascript|209789|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

even better than manually bootstrapping (which is not always a bad idea either).

<pre><code>angular.module('myApp', ['app.services'])
 .run(function(myservice) {
 //stuff here.
 });
</code></pre>

blocks|key|214230|text|实现这一目标的正确方法是在路由定义上使用resolve属性:请参阅http://docs.angularjs.org/api/ngRoute.$routeProvider|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|214231|然后使用$q服务创建并返回promise；还可以使用$http发出请求，并在响应时解析promise。|214232|这样，当解析路由并加载控制器时，promise的结果将已经可用，并且不会发生闪烁。|214233|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ngRoute.%2524routeProvider^0|X|1G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

The correct way to achieve that is using resolve property on routes definition:
see <a href="http://docs.angularjs.org/api/ngRoute.%24routeProvider" rel="nofollow">http://docs.angularjs.org/api/ngRoute.$routeProvider</a>

then create and return a promise using the $q service; also use $http to make the request and on response, resolve the promise.

That way, when route is resolved and controller is loaded, the result of the promise will be already available and not flickering will happen.

blocks|key|3067871|text|可以在.config+$routeProvider中使用resolve。如果返回了promise+(就像这里一样)，那么路由将不会加载，直到它被解析或拒绝。此外，返回值将可用于注入控制器(在本例中为Somert)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3067872|angular.module('somertApp')
++.config(function($routeProvider)+{
++++$routeProvider
++++++.when('/home/:userName',+{
++++++++/**/
++++++++resolve:+{
++++++++++Somert:+function($q,+$location,+Somert)+{
++++++++++++var+deferred+=+$q.defer();
++++++++++++Somert.get(function(somertVal)+{
++++++++++++++if+(somertVal)+{
++++++++++++++++deferred.resolve(somertVal);
++++++++++++++}+else+{
++++++++++++++++deferred.resolve();
++++++++++++++++$location.path('/error/');+//or+somehow+handle+not+getting
++++++++++++++}
++++++++++++});
++++++++++++return+deferred.promise;
++++++++++},
++++++++},
++++++});
++});|code-block|syntax|javascript|3067873|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use resolve in the .config $routeProvider. If a promise is returned (as it is here), the route won't load until it is resolved or rejected. Also, the return value will be available to injected into the controller (in this case Somert).

<pre class="lang-js prettyprint-override"><code>angular.module('somertApp')
 .config(function($routeProvider) {
 $routeProvider
 .when('/home/:userName', {
 /**/
 resolve: {
 Somert: function($q, $location, Somert) {
 var deferred = $q.defer();
 Somert.get(function(somertVal) {
 if (somertVal) {
 deferred.resolve(somertVal);
 } else {
 deferred.resolve();
 $location.path('/error/'); //or somehow handle not getting
 }
 });
 return deferred.promise;
 },
 },
 });
 });
</code></pre>

My problem is that i need a service loaded before the controller get called and the template get rendered.
<a href="http://jsfiddle.net/g75XQ/2/" rel="noreferrer">http://jsfiddle.net/g75XQ/2/</a>

Html:

<pre><code>&lt;div ng-app="app" ng-controller="root"&gt;
 &lt;h3&gt;Do not render this before user has loaded&lt;/h3&gt; 
 {{user}}
&lt;/div&gt;
​
</code></pre>

JavaScript:

<pre><code>angular.module('app', []).
factory('user',function($timeout,$q){
 var user = {}; 
 $timeout(function(){//Simulate a request
 user.name = "Jossi";
 },1000);
 return user;
}).
controller('root',function($scope,user){

 alert("Do not alert before user has loaded");
 $scope.user = user;

});
​
</code></pre>

​

AngularJS load service then call controller and render

路由

我的问题是，我需要在调用控制器和呈现模板之前加载一个服务。Html：<div ng-app="app" ng-controller="root"> <h3>Do not render this before user has loaded</h3> {{user}}</div>​Ja...

问AngularJS加载服务，然后调用控制器并呈现
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS加载服务，然后调用控制器并呈现EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS加载服务，然后调用控制器并呈现
EN