©
本文档使用
php中文网手册 发布
该ngCloak 指令是用来防止应用程序加载时Angular HTML模板的原始形式（未编译的）被浏览器显示为简要形式。使用这个指令，避免由HTML模板显示造成不舒服的闪烁效果。
这个指令能被应用到 <body> 元素上，但推荐的用法是将多个ngCloak 指令应用到页面的一小部分来允许浏览器视图渐进式渲染。
ngCloak的使用要配合angular.js和 angular.min.js内嵌的css规则。对于CSP模式，请添加 angular-csp.css到你的html文件(参见ngCsp)。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;}当这个CSS规则被浏览器加载时，所有的HTML元素（包括孩子）的ngCloak 指令对应的标签是隐藏的。当Angular在模板编译时遇到这个指令，它删除ngCloak元素属性，使编译后的元素可见。
为获得最佳效果， angular.js脚本必须在HTML文档的头部加载；另外，上面的CSS规则必须包含在应用程序的外部样式表中。
传统的浏览器，如IE7，不提供属性选择支持（CSS2.1才支持），所以他们不能匹配[ng\:cloak] 选择器。为了绕过这个限制，除ngCloak指令之外，你必须添加CSS类 ng-cloak，如下面的例子所示。
<ANY>
...
</ANY><ANY class=""> ... </ANY><div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>it('should remove the template directive and css class', Function() {
expect($('#template1').getAttribute('ng-cloak')).
toBeNull();
expect($('#template2').getAttribute('ng-cloak')).
toBeNull();});