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>