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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 手动初始化Angular的模块与控制器

    在上面的文章中,都是在html元素上绑定ng-app="myApp",然後使用angular.module('myApp',[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

    本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替

  • AngularJS初始化静态模板详解

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串

  • Angular.js基础学习之初始化

    一.绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的. <body ng-app="myApp"> <div ng-controller="myCtrl"> {{ hello }} <

  • AngularJS初始化过程分析(引导程序)

    概览 这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化. AngularJS的 <script> 标签 这个示例展示了我们推荐的整合AngularJS的方法,它被称之为"自动初始化". 复制代码 代码如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app>     <body>         ..

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

    本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法.分享给大家供大家参考,具体如下: 在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({% raw %} {{ express }} {% endraw %} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于angular会在DOM ready完会才回去解析html view Templ

  • AngularJS页面访问时出现页面闪烁问题的解决

    我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. 这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上. 1.ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含

  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题.     在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢?     比如:     $scope.this.is.a.very.deep.obj = {     'name': 'xxx',     'state': 'active

  • AngularJS的ng Http Request与response格式转换方法

    本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt

  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • AngularJS基于provider实现全局变量的读取和赋值方法

    本文实例讲述了AngularJS基于provider实现全局变量的读取和赋值方法.分享给大家供大家参考,具体如下: 简单全局变量的设置 1,通过var 直接定义global variable,这根纯js是一样的. 2,用angularjs value来设置全局变量 . 3,用angularjs constant来设置全局变量 . 示例代码如下: 在app文件中,声明三种变量 'use strict'; /* App Module */ var test2 = 'tank'; //方法1,定义全局

  • swiper在angularjs中使用循环轮播失效的解决方法

    bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类

  • AngularJS实现根据变量改变动态加载模板的方法

    本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法.分享给大家供大家参考,具体如下: directive: return { restrict: 'E', replace: true, templateUrl: 'app/view/order.html', link: function (scope, element, attrs) { scope.Type = attrs.Type; } }; 模板: <div ng-switch on="item.Type"&

  • AngularJS报错$apply already in progress的解决方法分析

    本文实例分析了AngularJS报错$apply already in progress的解决方法.分享给大家供大家参考,具体如下: 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了. Error: [$rootScope:inprog] $apply already

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

随机推荐