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 相关文章推荐
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
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
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
利用python实现数据分析
2017/01/11 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python 8种必备的gui库
2020/08/27 Python
给交警的表扬信
2014/01/12 职场文书
工作疏忽检讨书
2014/01/25 职场文书
导游实习生自荐书
2014/01/28 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
读书月活动方案
2014/05/22 职场文书
2014年大学生工作总结
2014/11/20 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Pyhton模块和包相关知识总结
2021/05/12 Python
Python之基础函数案例详解
2021/08/30 Python