本文實(shí)例講述了AngularJS使用ng-Cloak阻止初始化閃爍問題的方法。分享給大家供大家參考，具體如下：

在做angular的SPA開發(fā)時(shí)，我們經(jīng)常會(huì)遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({% raw %} {{ express }} {% endraw %} ),或者是模塊(div)的閃爍。對(duì)于這個(gè)問題由于JavaScript去操作DOM，都會(huì)等待DOM加載完成（DOM ready）。對(duì)于angular會(huì)在DOM ready完會(huì)才回去解析html view Template，所以對(duì)于Chrome這類快速的瀏覽器你會(huì)看見有閃爍的情況出現(xiàn)。而對(duì)于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會(huì)出現(xiàn)這個(gè)問題的。

在angular中為我們提供了ng-cloak來實(shí)現(xiàn)防止閃爍的方案，我們只需要在需要的地方加上ng-cloak。同時(shí)對(duì)于bing文字({% raw %}{{ express }} {% endraw %})我們也可以改為ng-bind來實(shí)現(xiàn)避免。

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{% raw %} {{ 'hello IE7' }} {% endraw %} </div>
<div id="template2" ng-bing="'hello IE7'"></div>

angular將ng-cloak實(shí)現(xiàn)為一個(gè)directive，并會(huì)在初始化的時(shí)候在DOM的heade增加一行css代碼，如下：

從上面我們可以看見angular將帶有ng-clock的的元素設(shè)置為display:none，隱藏掉，在等到angular解析到帶有ng-clock的節(jié)點(diǎn)時(shí)候，會(huì)把a(bǔ)ttribute和class同時(shí)remove掉，這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。

var ngCloakDirective = ngDirective({
   compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
   }
});

在angular-bootstrap.js中會(huì)看見這樣的代碼去增加前面所說的css：

好像閃爍的問題好像已經(jīng)能夠被我解決了，恩是否是這樣的，理論也改如此，但是現(xiàn)實(shí)是殘酷的，我們的感性認(rèn)識(shí)經(jīng)常會(huì)被現(xiàn)實(shí)一記重重的耳光，我們才能很更深入全面的思考，如果瀏覽器的速度比angular在head中加入css的速度還快呢？我在給公司的一個(gè)項(xiàng)目組解決這個(gè)閃爍的問題的時(shí)候就遇見了這個(gè)問題。怎么辦呢？那我們只能使出我們必殺技，自己把css加入我們的css文件引入heade，啟動(dòng)加載，ok這樣就可以完美解決了。(如果你也遇見了加了ng-cloak還不起作用的話，那么試試直接引入css文件吧)

到這里關(guān)于ng-cloak的原理和解決方案已經(jīng)完成。

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論