您的位置:首页 > Web前端 > AngularJS

angularjs页面加载时闪屏问题

2017-10-31 10:22 465 查看
由于有时候网速或者其他的原因导致数据刷新很慢,如果使用{{ }}绑定,就会显示出变量原型及{{}},
首先想到的解决办法是:首页用ng-bind绑定数据,其他的可以用{{ }}绑定。
使得之前的 
<div>你的编号是{{index + 1}}</div>
华丽丽的转化为
<div>你的编号是<span ng-bind="index+1"></span></div>
,也不知道你看着感觉如何,反正我是看着有点揪心,我好端端的只需要一个元素就能搞定的问题,现在需要两个元素,如果遇到更复杂的问题那就真的头大了,于是我又找到了另一种解决办法:
通过ng-cloak指令来解决,直接为元素添加此属性,angularjs会将首先将带有ng-cloak的元素设置为display=none,等到angularjs解析到带有ng-cloak的标签时,再去掉display=none样式以及ng-cloak属性。
此时又会发现还有一个问题,当同一个页面有很多ng-cloak时,加载完第一个带有ng-cloak的元素,其他的带有ng-cloak元素的display:none也一起消失了,此时之前的问题又发生了,为了解决这个问题,我们不妨这样写:

<div
ng-cloak class=‘ng-cloak’>{{index + 1}}</div>

这样就完美的解决了上述问题。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angularjs 闪屏