IT博客汇 | Ng-cloak解决angularJS中的闪烁

Ng-cloak解决angularJS中的闪烁

陈华发表于 2015-05-11 06:45:48

在用angularJS框架开发中,页面加载时会看到有表达式{{express}}或者过滤器{{express | filter}}在页面中闪过。这个问题是由于javascript操作DOM的时候，是等DOM结构都加载完成，才回头处理引用的angularJS文件。这是引起表达式或过滤器在页面闪烁的原因。

如何解决因加载顺序引起的闪烁呢？angularJS为我们提供了ng-cloak,我们可以在需要的地方加上ng-cloak。如：

<body screen_capture_injected=”true” ng-controller=”adminAppCtrl” ng-cloak>  ……</div></p>
<p><ul ng-cloak="ng-cloak">……</ul>

Ng-cloak实现原理为一个directive，页面初始化是在DOM的heade增加一行CSS代码，如下：

<pre class= “prettyprint linenums”></p>
<p>      [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{</p>
<p>        Display:none ! important;</p>
<p>}</p>
<p></pre>

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{

Display:none!important;

}

</pre>

Angular将带有ng-cloak的元素设置为display：none.

在等到angular解析到带有ng-cloak节点的时候，会把元素上ng-cloak attribute和calss同时remove掉，这样就防止了节点的闪烁。如下：

<script type =”text/ng-template” id =”scenario.js-150”></p>
<p>      It(‘should remove the template directive and css class’,function(){</p>
<p>  Expect(element(‘.doc-example-live #template1’).attr(‘ng-cloak’))</p>
<p>       not().toBeDefined();</p>
<p>          Expect(element(‘.doc-example-live #template2’).attr(‘ng-cloak’)).</p>
<p>Not().toBeDefined();</p>
<p>});</p>
<p></script>