Ben*_*ant 44
来自文档:
ngCloak指令用于防止浏览器在加载应用程序时以原始(未编译)形式短暂显示Angular html模板.使用此指令可避免html模板显示导致的不良闪烁效应.
简而言之,您可以使用ng-cloak指令来防止显示未编译的元素.未编译的元素可以是保存和等待传入数据的元素:
<div ng-cloak>{{myvar}}</div>
如果myvar控制器仍未编译或数据未填充,则ng-cloak会阻止显示"{{myvar}}",并且仅在编译变量时显示div.
按照此示例代码,检查结果与不NG-披风:
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display: none !important;
}
</style>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData">
{{item.title}}
</li>
</ol>
</body>
var myApp= angular.module("myApp",['ngResource']);
myApp.controller("MyController", ["$scope", "$resource","$timeout",
function($scope,$resource,$timeout){
$scope.myData =[];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow){
console.log(aSingleRow);
$scope.myData.push({
"title":aSingleRow.title
});
});
});
}]);
小智 11
使用ng-cloak Ben的原因是有效的,但Ben提供的示例的结果在某些情况下仍会显示{{var}}.当脚本通常异步加载或放在任何html主体的底部时,这在野外尤其如此.
在Ben的例子中,他将<style>顶部但不使用它,我们应该将ng-cloak类放在上面<body>,并使用该样式:
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...
这样,在Angular将ng-cloak更改为display: block或指令更新标记的html 之前,不会显示body标记的内容.
添加类的原因是因为在显示html 之后解析了ng-cloak指令,所以总是有可能你的JS线程死了并且仍然显示类似的东西{{something here}}.
正确使用的一个很好的例子是在指令中包含class="ng-cloak"和指令.ng-cloakng-repeat
但是,如果只是{{}}那令人讨厌,而且即使JS线程崩溃,页面也很好,最好ng-bind在你的标签上使用它而不是添加{{}}它们.
| 归档时间： |
|
| 查看次数： |
39429 次 |
| 最近记录： |