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

在用angularJS框架开发中,页面加载时会看到有表达式{{express}}或者过滤器{{express | filter}}在页面中闪过。这个问题是由于javascript操作DOM的时候,是等DOM结构都加载完成,才回头处理引用的angularJS文件。这是引起表达式或过滤器在页面闪烁的原因。

如何解决因加载顺序引起的闪烁呢?angularJS为我们提供了ng-cloak,我们可以在需要的地方加上ng-cloak。如:

<body screen_capture_injected="true" ng-controller="adminAppCtrl" ng-cloak>  ……</div>
 
<ul ng-cloak>……</ul>
 
Ng-cloak实现原理为一个directive,页面初始化是在DOM的heade增加一行CSS代码,如下:

<pre class= “prettyprint linenums”>
 
      [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
 
        Display:none ! important;
 
}
 
</pre>
 

Angular将带有ng-cloak的元素设置为display:none.

在等到angular解析到带有ng-cloak节点的时候,会把元素上ng-cloak  attribute和calss同时remove掉,这样就防止了节点的闪烁。如下:

<script type =”text/ng-template” id =”scenario.js-150”>
 
      It(‘should remove the template directive and css class’,function(){
 
  Expect(element(‘.doc-example-live #template1’).attr(‘ng-cloak’))
 
       not().toBeDefined();
 
          Expect(element(‘.doc-example-live #template2’).attr(‘ng-cloak’)).
 
Not().toBeDefined();
 
});
 
</script>

时间: 2024-12-20 14:34:53

Ng-cloak解决angularJS中的闪烁问题的相关文章

AngularJS中的ng-repeat迭代数组的例子

先来粘贴代码: <html> <head>     <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script>     <script type="text/javascript">     angular.module('app',[]).controller('HelloCtrl',function ($scope) {

AngularJS 中使用Swiper制作滚动图不能滑动的解决方法_AngularJS

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法_AngularJS

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

在React框架中实现一些AngularJS中ng指令的例子_AngularJS

首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i>   比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面      <i classNa

浅析AngularJS中的生命周期和延迟处理

  这篇文章主要介绍了浅析AngularJS中的生命周期和延迟处理,是AngularJS中较为核心的深层次内容,需要的朋友可以参考下 这里,我们再讨论一些常用的高级的控制反转容器(Inversion of Control containers):延迟加载(lazy-loading),生命周期管理(lifetime management),以及延迟的创建/处理(deferred creation/resolution). 延迟加载(Lazy-Loading) 所谓延迟加载就是当你需要用到对象时候才

AngularJS中关于ng-class指令的几种实现方式详解_AngularJS

前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

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

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模

AngularJS中处理多个promise的方式_AngularJS

在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况. 最简单的处理就是每个promise都then.如下: var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $timeout){ var one = $q.defer(); var two = $q.defer(); var three = $q.defer(); $time

详解AngularJS中自定义过滤器_AngularJS

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何