Ng-cloak解決angularJs中的閃爍問題

時間 2019-11-19

標籤 cloak 解決 angularjs 閃爍問題欄目 AngularJS 简体版

原文原文鏈接

引言

上一篇博客寫到了使用ng-bind指令解決頁面顯示{{express}}問題，此次咱們來使用另外一種方法解決一下。javascript

在使用AngularJS開發評教移動端的時候，咱們常常會看見在Chrome這類快速解析的瀏覽器上會閃過{{express}}。這是因爲JavaScript去操做DOM，都會等待DOM加載完成以後。一樣，anguarjs等DOM加載完成以後纔回去解析html，因此瀏覽器上會出現閃爍的狀況。css

解決這個問題，其實angularjs給了一個指令——ng-cloak。咱們能夠在須要的地方加上這個指令就能夠。html

[html] view plain copy print ?

Ng-cloak實現原理爲：頁面初始化是在DOM的header增長一行css代碼。
java

[html] view plain copy print ?

<span style="font-size:18px;"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
</style></span>