我正在研究 angularjs。我创建了一个脚本。当我在浏览器上启动applciation时，出现这样的，
稍后会有结果，
<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>
我想在加载第二张图片后看到结果。
最佳答案
你想要 ngCloak指令，它使 Angular 模板保持隐藏状态，直到您的应用程序准备就绪:
<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>
编辑:如果您在 <head> 中加载 Angular，这只会产生预期的效果。 HTML 部分(或在使用 ngCloak 指令之前)。如果您仍想在文档末尾加载 Angular，则需要在模板之前包含此 CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
关于javascript - Angularjs dom加载准备就绪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18828802/