Angularjs dom加载准备好

我正在研究angularjs。我创建了一个scrlipt。当我开始在浏览器applciation，出现这样的，Angularjs dom加载准备好

enter image description here

和稍后到来的结果，

enter image description here

<body> 
    <div data-ng-controller="SimpleController"> 
     Search By Name: <input type="text" data-ng-model="searchTerm" /> 
     <ul> 
      <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li> 
     </ul> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script type="text/javascript"> 
     function SimpleController($scope) { 
      $scope.customers = [ 
       { name: 'John', city: 'Barcelona' }, 
       { name: 'Scott', city: 'Madrid' }, 
       { name: 'Jennifer', city: 'Seattle' }, 
       { name: 'Mike', city: 'Atalanta' } 
      ]; 
     } 
    </script> 
</body>

我想看看加载一切都像第二张照片后导致。

来源

2013-09-16 barteloma

你想要ngCloak指令，保持隐角模板，直到您的应用程序已准备就绪：

<body> 
    <div data-ng-controller="SimpleController"> 
     Search By Name: <input type="text" data-ng-model="searchTerm" /> 
     <ul data-ng-cloak> 
      <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li> 
     </ul> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script type="text/javascript"> 
     function SimpleController($scope) { 
      $scope.customers = [ 
       { name: 'John', city: 'Barcelona' }, 
       { name: 'Scott', city: 'Madrid' }, 
       { name: 'Jennifer', city: 'Seattle' }, 
       { name: 'Mike', city: 'Atalanta' } 
      ]; 
     } 
    </script> 
</body>

编辑：这只会收到预期的效果，如果您加载HTML的<head>节角（或在使用ngCloak指令之前）。如果您仍希望在文档末尾加载Angular，则需要在模板之前包含此CSS：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
}

来源

2013-09-16 13:20:40 Intelekshual

Angularjs dom加载准备好

回答

相关问题