在用angularJS框架开发中,页面加载时会看到有表达式{{express}}或者过滤器{{express | filter}}在页面中闪过。这个问题是由于javascript操作DOM的时候，是等DOM结构都加载完成，才回头处理引用的angularJS文件。这是引起表达式或过滤器在页面闪烁的原因。
如何解决因加载顺序引起的闪烁呢？angularJS为我们提供了ng-cloak,我们可以在需要的地方加上ng-cloak。如：
|
|
<body screen_capture_injected=“true”ng–controller=“adminAppCtrl”ng–cloak>??……</div>
<ul ng–cloak>……</ul>
|
Ng-cloak实现原理为一个directive，页面初始化是在DOM的heade增加一行CSS代码，如下：
|
|
<pre class=“prettyprint linenums”>
??????[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掉，这样就防止了节点的闪烁。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script type=”text/ng-template” id =”scenario.js-150”>
??????It(‘should remove the template directive and css class’,function(){
??Expect(element(‘.doc-example-live #template1’).attr(‘ng-cloak’))
?????? not().toBeDefined();
??????????Expect(element(‘.doc-example-live #template2’).attr(‘ng-cloak’)).
Not().toBeDefined();
});
</script>
|
相关笔记
评论