首页 > 代码库 > Ng-cloak解决angularJs中的闪烁问题
Ng-cloak解决angularJs中的闪烁问题
引言
上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下。
在使用AngularJS开发评教移动端的时候,我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于JavaScript去操作DOM,都会等待DOM加载完成之后。同样,anguarjs等DOM加载完成之后才回去解析html,所以浏览器上会出现闪烁的情况。
解决这个问题,其实angularjs给了一个指令——ng-cloak。我们可以在需要的地方加上这个指令就可以。
[html] view plain copy print?
- <span style="font-size:18px;"><!DOCTYPE html>
- <html ng-app>
- <head>
- <meta charset="utf-8">
- <title>ng-bind directive</title>
- </head>
- <body ng-controller="HelloController">
- <div ng-cloak>
- <p>直接输出字符串字面值</p>
- Hello {{"World"}}
- <hr>
- </div>
- </body>
- <script src=http://www.mamicode.com/"js/angular-1.3.0.js"></script>
- </html></span>
原理
Ng-cloak实现原理为:页面初始化是在DOM的header增加一行css代码。
[html] view plain copy print?
- <span style="font-size:18px;"><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;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
- </style></span>
Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候,会把元素上ng-cloak attribute和calss同时remove掉,这样就防止了节点的闪烁。
总结
所有的事情都像老师说的那样:方法总比问题多!
Ng-cloak解决angularJs中的闪烁问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。