AngularJS使用ng-Cloak阻止初始化闪烁问题的方法


Posted in Javascript onNovember 03, 2016

本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法。分享给大家供大家参考,具体如下:

在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({% raw %} {{ express }} {% endraw %} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于angular会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。

angular中为我们提供了ng-cloak来实现防止闪烁的方案,我们只需要在需要的地方加上ng-cloak。同时对于bing文字({% raw %}{{ express }} {% endraw %})我们也可以改为ng-bind来实现避免。

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

angular将ng-cloak实现为一个directive,并会在初始化的时候在DOM的heade增加一行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;}

从上面我们可以看见angular将带有ng-clock的的元素设置为display:none,隐藏掉,在等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。

var ngCloakDirective = ngDirective({
   compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
   }
});

在angular-bootstrap.js中会看见这样的代码去增加前面所说的css:

document.write('<link rel="stylesheet" type="text/css" href="' + serverPath + '../css/angular.css"/>');

好像闪烁的问题好像已经能够被我解决了,恩是否是这样的,理论也改如此,但是现实是残酷的,我们的感性认识经常会被现实一记重重的耳光,我们才能很更深入全面的思考,如果浏览器的速度比angular在head中加入css的速度还快呢?我在给公司的一个项目组解决这个闪烁的问题的时候就遇见了这个问题。怎么办呢?那我们只能使出我们必杀技,自己把css加入我们的css文件引入heade,启动加载,ok这样就可以完美解决了。(如果你也遇见了加了ng-cloak还不起作用的话,那么试试直接引入css文件吧)

到这里关于ng-cloak的原理和解决方案已经完成。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
javascript实现时钟动画
Dec 03 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
Vue.js实现无限加载与分页功能开发
Nov 03 #Javascript
vue自定义指令实现v-tap插件
Nov 03 #Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 #Javascript
vue.js指令v-for使用及索引获取
Nov 03 #Javascript
vue.js初学入门教程(1)
Nov 03 #Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 #Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 #Javascript
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python subprocess模块详细解读
2018/01/29 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
为什么要有struct关键字
2012/05/08 面试题
力学专业求职信
2014/07/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python