在用angularJS架構開發中,頁面載入時會看到有運算式{{express}}或者過濾器{{express | filter}}在頁面中閃過。這個問題是由於javascript操作DOM的時候，是等DOM結構都載入完成，才回頭處理引用的angularJS檔案。這是引起運算式或過濾器在頁面閃爍的原因。
如何解決因載入順序引起的閃爍呢？angularJS為我們提供了ng-cloak,我們可以在需要的地方加上ng-cloak。如：
<body screen_capture_injected="true" ng-controller="adminAppCtrl" ng-cloak> ……</div>
<ul ng-cloak>……</ul>
Ng-cloak實現原理為一個directive，頁面初始化是在DOM的heade增加一行CSS代碼，如下：
<pre class= “prettyprint linenums”>
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none ! important;
}
</pre>
Angular將帶有ng-cloak的元素設定為display：none.
在等到angular解析到帶有ng-cloak節點的時候，會把元素上ng-cloak attribute和calss同時remove掉，這樣就防止了節點的閃爍。如下：
<script type =”text/ng-template” id =”scenario.js-150”>
It(‘should remove the template directive and css class’,function(){
Expect(element(‘.doc-example-live #template1’).attr(‘ng-cloak’))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2’).attr(‘ng-cloak’)).
Not().toBeDefined();
});
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
