Angularjs dom已准备就绪
bar*_*oma 1 javascript angularjs angularjs-directive angularjs-ng-repeat
我正在研究angularjs.我创建了一个scrlipt.当我在浏览器上开始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>HTML 的部分(或使用ngCloak指令之前)加载Angular,这将只有所需的效果.如果您仍想在文档末尾加载Angular,则需要在模板之前包含此CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
| 归档时间： |
|
| 查看次数： |
2543 次 |
| 最近记录： |