AngularJS使用ng-Cloak阻止初始化閃爍問題的方法
本文實例講述了AngularJS使用ng-Cloak阻止初始化閃爍問題的方法。分享給大家供大家參考，具體如下：
在做angular的SPA開發(fā)時，我們經(jīng)常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({% raw %} {{ express }} {% endraw %} ),或者是模塊(div)的閃爍。對于這個問題由于JavaScript去操作DOM，都會等待DOM加載完成（DOM ready）。對于angular會在DOM ready完會才回去解析html view Template，所以對于Chrome這類快速的瀏覽器你會看見有閃爍的情況出現(xiàn)。而對于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現(xiàn)這個問題的。
在angular中為我們提供了ng-cloak來實現(xiàn)防止閃爍的方案，我們只需要在需要的地方加上ng-cloak。同時對于bing文字({% raw %}{{ express }} {% endraw %})我們也可以改為ng-bind來實現(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實現(xiàn)為一個directive，并會在初始化的時候在DOM的heade增加一行css代碼，如下：
從上面我們可以看見angular將帶有ng-clock的的元素設(shè)置為display:none，隱藏掉，在等到angular解析到帶有ng-clock的節(jié)點時候，會把attribute和class同時remove掉，這樣就可以實現(xiàn)防止節(jié)點的閃爍。
var ngCloakDirective = ngDirective({
compile: function(element, attr) {
attr.$set('ngCloak', undefined);
element.removeClass('ng-cloak');
}
});
在angular-bootstrap.js中會看見這樣的代碼去增加前面所說的css：
好像閃爍的問題好像已經(jīng)能夠被我解決了，恩是否是這樣的，理論也改如此，但是現(xiàn)實是殘酷的，我們的感性認(rèn)識經(jīng)常會被現(xiàn)實一記重重的耳光，我們才能很更深入全面的思考，如果瀏覽器的速度比angular在head中加入css的速度還快呢？我在給公司的一個項目組解決這個閃爍的問題的時候就遇見了這個問題。怎么辦呢？那我們只能使出我們必殺技，自己把css加入我們的css文件引入heade，啟動加載，ok這樣就可以完美解決了。(如果你也遇見了加了ng-cloak還不起作用的話，那么試試直接引入css文件吧)
到這里關(guān)于ng-cloak的原理和解決方案已經(jīng)完成。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了AngularJS上拉加載問題解決方法的相關(guān)資料,該問題在項目中一直存在，小編給大家分享解決辦法，需要的朋友可以參考下2016-05-05
angularjs 的數(shù)據(jù)綁定實現(xiàn)原理
本篇文章主要介紹了angularjs 的數(shù)據(jù)綁定實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
詳解Angularjs 如何自定義Img的ng-load 事件
本篇文章主要介紹了詳解Angularjs 如何自定義Img的ng-load 事件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結(jié)合實例形式詳細(xì)分析了Angular4輸入屬性與輸出屬性的概念、功能及相關(guān)使用技巧,需要的朋友可以參考下2017-11-11
本篇文章主要介紹了如何將angular-ui的圖片輪播組件封裝成一個指令 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
在Angular項目使用socket.io實現(xiàn)通信的方法
這篇文章主要介紹了在Angular項目使用socket.io實現(xiàn)通信的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法，需要的的朋友參考下吧2017-07-07