标签：cal head rect exp pre www import ref color
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。
出现这个的原因是：由于页面或者组件需要渲染加载数据，浏览器和angluarjs渲染页面需要消耗一定的时间，虽然这个时间很多，可能肉眼看不出来，但有的时候加载时间比较长的时候，特别是网络等原因。这样就看到了在渲染前的带有语法的页面。
解决的办法如下：
ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：
<div ng-cloak> <h1>Hello {{ name }}</h1> </div>
Ng-cloak实现原理为一个directive，页面初始化是在DOM的head增加一行CSS代码，如下：
<pre class= “prettyprint linenums”> [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{ Display:none ! important; } </pre> <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掉，这样就防止了节点的闪烁。如下：
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> <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>
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上；
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了
<div> <h1>Hello <span ng-bind="name"></span></h1> </div>
参考地址：http://www.jb51.net/article/8...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
标签：cal head rect exp pre www import ref color
原文地址：http://www.cnblogs.com/moqiutao/p/6363971.html
