Angular在頁面加載很慢的時候,會出現雙花括號的問題

咱們知道在應用的頁面或者組件須要加載數據時，瀏覽器和angular渲染頁面都須要消耗必定的時間。這裏的間隔可能很小，甚至讓人感受不到區別；但也可能很長，這樣會致使讓咱們的用戶看到了沒有被渲染過的頁面。

這種狀況被叫作Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.如下幾種方法能夠解決這個問題：

一、ng-cloak
ng-cloak指令是angular的內置指令，它的做用是隱藏全部被它包含的元素：

<div ng-cloak>
  <h1>Hello {{ name }}</h1>
</div>

在瀏覽器加載和編譯渲染完成以後，angular會自動刪除ngCloak元素屬性，這樣這個元素就會變成可見的。

在IE7裏面使用ng-cloak的安全方式是給元素多加一個ng-cloak class

<div ng-cloak class="ng-cloak">
  <h1>Hello {{ name }}</h1>
</div>

二、ng-bind
ng-bind是angular裏面另外一個內置的用於操做綁定頁面數據的指令。咱們可使用ng-bind代替{{ }}的形式綁定元素到頁面上；

使用ng-bind替代{{  }}能夠防止未被渲染的{{ }}就展現給用戶了，使用ng-bind渲染的空元素替代{{ }}會顯得友好不少。

上面的例子能夠重寫成下面那樣，這樣就能夠防止頁面出現{{ }}了

<div>
  <h1>Hello <span ng-bind="name"></span></h1>
</div>