angular.js ng-repeat渲染时出现闪烁问题解决

当我们前端运用到angular.js框架时，想必大家都会遇到一些坑。其中，我也来分享一个常见的angular.js渲染时出现的坑。

当我们进行页面渲染时，绑定表达式最开始会用{{data.name}}这种类型，但是这样绑定时遇到网速不好的时候，页面加载会先看到{{data.name}}这个表达式，给用户的体验极其不好。

这个解决方法就是用ng-cloak或者ng-bind来绑定，就解决了这个问题。然而，当遇上循环，ng-repeat的时候，问题就出现了，解决办法如下：

1.不能够给循环节点直接加上display:none样式;

2.前提我们要知道angular js 的 ng-show是通过给节点增加class ng-hide 隐藏div的，当符合ng-show条件时移除class ng-hide,如果你给节点加了display:none;那么此时div仍然是隐藏，所以你开始的时候就给节点加上class='ng-hide',就行了

3.不过ng-hide 的style 其实也是angular.min.js加载完后添加到head里的，所以如果你担心用户网速慢，导致js加载慢，依然有延迟的话，把下面这段代码添加到你的公告css样式里去。

@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}

注：使用循环ng-repeat的地方也要加上ng-cloak

<div class="main">
　　<ul>
　　　　<li ng-cloak ng-repeat="data in newlist">
　　　　　　　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
　　　　</li>
　　</ul>
</div>