?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
該ngCloak
指令是用來防止應(yīng)用程序加載時Angular HTML模板的原始形式(未編譯的)被瀏覽器顯示為簡要形式。使用這個指令,避免由HTML模板顯示造成不舒服的閃爍效果。
這個指令能被應(yīng)用到 <body>
元素上,但推薦的用法是將多個ngCloak
指令應(yīng)用到頁面的一小部分來允許瀏覽器視圖漸進式渲染。
ngCloak
的使用要配合angular.js
和 angular.min.js
內(nèi)嵌的css規(guī)則。對于CSP模式,請?zhí)砑?angular-csp.css
到你的html文件(參見ngCsp)。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;}
當這個CSS規(guī)則被瀏覽器加載時,所有的HTML元素(包括孩子)的ngCloak
指令對應(yīng)的標簽是隱藏的。當Angular在模板編譯時遇到這個指令,它刪除ngCloak
元素屬性,使編譯后的元素可見。
為獲得最佳效果, angular.js
腳本必須在HTML文檔的頭部加載;另外,上面的CSS規(guī)則必須包含在應(yīng)用程序的外部樣式表中。
傳統(tǒng)的瀏覽器,如IE7,不提供屬性選擇支持(CSS2.1才支持),所以他們不能匹配[ng\:cloak]
選擇器。為了繞過這個限制,除ngCloak
指令之外,你必須添加CSS類 ng-cloak
,如下面的例子所示。
<ANY>
...
</ANY>
<ANY class=""> ... </ANY>
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
it('should remove the template directive and css class', Function() {
expect($('#template1').getAttribute('ng-cloak')).
toBeNull();
expect($('#template2').getAttribute('ng-cloak')).
toBeNull();});