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>

Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候，会把元素上ng-cloak attribute和calss同时remove掉，这样就防止了节点的闪烁。angularjs

全部的事情都像老师说的那样：方法总比问题多！express