angluarjs中頁面初始化的時候會出現文法{{}}在頁面中問題

標籤：cal   head   rect   exp   pre   www   import   ref   color   

angluarjs中頁面初始化的時候會出現文法{{}}在頁面中問題，也即是頁面閃爍問題。
出現這個的原因是：由於頁面或者組件需要渲染載入資料，瀏覽器和angluarjs渲染頁面需要消耗一定的時間，雖然這個時間很多，可能肉眼看不出來，但有的時候載入時間比較長的時候，特別是網路等原因。這樣就看到了在渲染前的帶有文法的頁面。
解決的辦法如下：

1.ng-cloak

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>

2.ng-bind

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中頁面初始化的時候會出現文法{{}}在頁面中問題