Angular页面加载闪现解决方案 ng-cloak

在做Angular项目时，经常会遇见在浏览器上闪烁表达式({{ express }} ),及模块(div)的闪烁，会闪现/闪烁隐藏的数据，之前用过vue.js，可以通过v-clock解决，同理Angular也可以通过ng-cloak来实现防止闪烁的方案。

"template1" ng-cloak>河马家
"template2" ng-cloak> {{hema}}

我们只需要在需要的地方加上ng-cloak，对于bing文字({{ express }} )我们也可以改为ng-bind来实现避免。

ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

ng-cloak实现为一个directive，并会在初始化的时候在DOM的head增加一行css代码，如下：

从上面代码可见angular将带有ng-clock的的元素设置为display:none，隐藏掉，在等到angular解析到带有ng-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防止节点的闪现/闪烁。

一般情况下，到此就可以解决闪现的问题了，但是如果浏览器的速度比angular在head中加入css的速度还快，问题依旧。

这时需要自己把上面那段css加入我们的css文件引入head，启动加载就可以完美解决闪烁问题！

转载于:https://www.cnblogs.com/hemajia/p/8038725.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！