码迷,mamicode.com
首页 > Web开发 > 详细

Ng-cloak解决angularJs中的闪烁问题

时间:2017-02-05 17:01:10      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:java   png   net   lib   lock   relative   mod   快速   XML   

引言

        上一篇博客写到了使用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中的闪烁问题

标签:java   png   net   lib   lock   relative   mod   快速   XML   

原文地址:http://www.cnblogs.com/sxz2008/p/6367901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!