Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak

iteye_13003

于 2014-08-02 17:30:43 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：乔乐共享众观千象每天进步一点点学习永无止境 angular

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82601735

js 专栏收录该内容

123 篇文章

订阅专栏

本文讨论了AngularJS模板加载过程中遇到的样式冲突问题，通过实例展示了如何使用ng-cloak和CSS来解决闪烁问题，并介绍了其他解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--这样加载未完成会闪烁一下-->
<h3 ng-repeat="aricle in list"><a href="{{aricle.url}}">{{$index+1}}、{{aricle.title}}({{aricle.en}})</a></h3>


<!--可以通过添加ng-cloak解决-->
<h3 ng-repeat="aricle in list" ng-cloak class="ng-cloak"><a href="{{aricle.url}}">{{$index+1}}、{{aricle.title}}({{aricle.en}})</a></h3>

测试表明需添加css样式才能生效，原因是页面加载的时候angularjs未加载完成：

.ng-cloak{display:none;}

原因是angularjs源码最后添加该样式隐藏：

window.angular.element(document).find("head").prepend('<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;}

其他解决方案：

 <div id="template1" ng-cloak>hello</div>
 <div id="template2" ng-cloak class="ng-cloak"> {{'hello IE7}}</div>
 <div id="template2" ng-bing="'hello IE7'"></div>