引言

上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题，这次我们来使用另一种方法解决一下。

在使用AngularJS开发评教移动端的时候，我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于JavaScript去操作DOM，都会等待DOM加载完成之后。同样，anguarjs等DOM加载完成之后才回去解析html，所以浏览器上会出现闪烁的情况。

解决这个问题，其实angularjs给了一个指令——ng-cloak。我们可以在需要的地方加上这个指令就可以。

  1. <span style="font-size:18px;"><!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ng-bind directive</title>
  6. </head>
  7. <body ng-controller="HelloController">
  8. <div ng-cloak>
  9. <p>直接输出字符串字面值</p>
  10. Hello {{"World"}}
  11. <hr>
  12. </div>
  13. </body>
  14. <script src="js/angular-1.3.0.js"></script>
  15. </html></span>

原理

Ng-cloak实现原理为：页面初始化是在DOM的header增加一行css代码。

  1. <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;}
  2. </style></span>

Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候，会把元素上ng-cloak 
attribute和calss同时remove掉，这样就防止了节点的闪烁。

总结

所有的事情都像老师说的那样：方法总比问题多！

Ng-cloak解决angularJs中的闪烁问题的更多相关文章

  1. 【AngularJS】解决ng-if中的ng-model值无效的问题(转)

    from:http://blog.csdn.net/u013451157/article/details/60866210 与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if ...

  2. angularJS中$digest already in progress报错解决方法

    看到一个前端群里有人问,就查了下解决"$digest already in progress"最好的方式,就是不要使用$scope.$apply()或者$scope.$digest ...

  3. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  4. 解决vue解析出现闪烁

    原因:  在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Jav ...

  5. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  6. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  7. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  8. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  9. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

随机推荐

  1. WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍

    这篇文章主要介绍了WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍,WQL是指Windows管理规范查询语言,需要的朋友可以参考下 WQL就是WMI中的查询语言,WQL的全称是W ...

  2. Emmet初探

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  3. C# 获取今天,昨天,上周,下周,上月，下月等等一些日期格式

    C#里内置的DateTime基本上都可以实现这些功能,巧用DateTime会使你处理这些事来变轻松多了 今天                             DateTime.Now.Date ...

  4. 在notepad++中运行python代码

    #在notepad++中运行python代码 ''' 1.安装插件pyNPP, 2.允许插件pyNPP中的第一个和第二个选项即可,如果代码过少代码执行一闪而过,可能无法看到,可加入少量sleep时间即 ...

  5. 微信小程序条码、二维码生成模块

    代码地址如下:http://www.demodashi.com/demo/13994.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

    最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...

  7. iOS 排序算法总结、二分法查找

    1.插入排序 在要排序的一组数中,假设前面(n-1) [n>=2] 个数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数也是排好顺序的.如此反复循环,直到全部排好顺序. 直接插 ...

  8. 腾讯云HTTPS设置管理

    腾讯云HTTPS解决方案:腾讯云针对现有用户,提供HTTPS的安全加密方案.腾讯云HTTPS有两种解决方法:客户自带证书和腾讯提供域名和证书. 腾讯云HTTPS解决方法客户提供证书和私钥,托管至腾讯云 ...

  9. FA_资产成批调整（流程）

    2014-06-08 Created By BaoXinjian

  10. nginx实战三

    nginx正向代理 https://coding.net/u/aminglinux/p/nginx/git/blob/master/proxy/z_proxy.md Nginx正向代理使用场景并不多见 ...