ngCloak

- directive in module ng

该ngCloak 指令是用来防止应用程序加载时Angular HTML模板的原始形式（未编译的）被浏览器显示为简要形式。使用这个指令，避免由HTML模板显示造成不舒服的闪烁效果。

这个指令能被应用到 <body> 元素上，但推荐的用法是将多个ngCloak 指令应用到页面的一小部分来允许浏览器视图渐进式渲染。

ngCloak的使用要配合angular.js和 angular.min.js内嵌的css规则。对于CSP模式，请添加 angular-csp.css到你的html文件(参见ngCsp)。

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

display: none !important;}</code>

当这个CSS规则被浏览器加载时，所有的HTML元素（包括孩子）的ngCloak 指令对应的标签是隐藏的。当Angular在模板编译时遇到这个指令，它删除ngCloak元素属性，使编译后的元素可见。

为获得最佳效果， angular.js脚本必须在HTML文档的头部加载；另外，上面的CSS规则必须包含在应用程序的外部样式表中。

传统的浏览器，如IE7，不提供属性选择支持（CSS2.1才支持），所以他们不能匹配[ng\:cloak] 选择器。为了绕过这个限制，除ngCloak指令之外，你必须添加CSS类 ng-cloak，如下面的例子所示。

指令信息

这个指令执行优先级为0.

用法

作为属性使用:

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><ANY></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">
...
</span><span style="box-sizing:border-box;color:navy;"></ANY></span></code>

作为CSS类使用:

示例

index.html

<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div></code>

protractor.js

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should remove the template directive and css class'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">
  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">$</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'#template1'</span><span style="box-sizing: border-box;">).</span><span style="box-sizing: border-box;">getAttribute</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ng-cloak'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">
    toBeNull</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">
  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">$</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'#template2'</span><span style="box-sizing: border-box;">).</span><span style="box-sizing: border-box;">getAttribute</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ng-cloak'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">
    toBeNull</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">});</span></code>

上一篇：ng/directive/ngClick下一篇：ng/directive/ngController

AngularJS: API: ng/directive/ngCloak

ngCloak

指令信息

用法

示例