当我们前端运用到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>