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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
提高PHP编程效率的方法
2013/11/07 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
简历中的自我评价范文
2014/02/05 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
经验交流材料格式
2014/12/30 职场文书
新郎新娘致辞
2015/07/31 职场文书
Go timer如何调度
2021/06/09 Golang