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加載準備好

回答

相關問題