The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Add those code to css:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

Usage:

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>

See: https://docs.angularjs.org/api/ng/directive/ngCloak

[AngularJS] ngCloak的更多相关文章

  1. AngularJs ngCloak、ngController、ngInit、ngModel

    ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   ...

  2. 结构-行为-样式-angularJs笔记

    0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...

  3. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

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

    引言 上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下. 在使用AngularJS开发评教移动端的时候,我们经常会看见在Chrome这类快 ...

  5. AngularJs解决表达式闪烁的问题(ng-cloak)

    举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak

    1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...

  7. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  8. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

  9. AngularJS之初级Route【一】(六)

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

随机推荐

  1. hdu 1573 x问题(中国剩余定理)HDU 2007-1 Programming Contest

    只是套模板而已(模板其实也不懂). 留着以后好好学的时候再改吧. 题意—— X = a[i] MOD b[i]; 已知a[i],b[i],求在[1, n]中存在多少x满足条件. 输入—— 第一行一个整 ...

  2. 《Python 学习手册4th》 第十一章 赋值、表达式和打印

    ''' 时间: 9月5日 - 9月30日 要求: 1. 书本内容总结归纳,整理在博客园笔记上传 2. 完成所有课后习题 注:“#” 后加的是备注内容 (每天看42页内容,可以保证月底看完此书) “重点 ...

  3. 【ActiveX】实现安全接口

    转自:http://www.cnblogs.com/carekee/articles/1772201.html 感谢原作者! ActiveX控件打包成cab后,在脚本中调用中时,要保证控件的安全性才能 ...

  4. ORA-15063: ASM discovered an insufficient number of disks for diskgroup "ASM,KEL"

    在启动ASM的时候报错,报错如下: SQL> startup ASM instance started Total System Global Area 130023424 bytes Fixe ...

  5. 一起刷LeetCode4-Median of Two Sorted Arrays

    实验室太吵了...怎么办啊... ----------------------------------------------------------------------------------- ...

  6. eclipse 使用gradle构建系统时候报错

    今天启动eclipse后,昨天运行正常的gradle项目报错,无法进行编译,错误信息如下: Unable to start the daemon process. This problem might ...

  7. <Chapter 2>2-2.开发应用(developing the Application)

    一个App Engine应用对网络请求做出响应.它是通过调用请求处理器(quest handlers)来实现的,接受请求参数并返回响应的程序.对于来自请求URL上的请求,App Engine通过一个配 ...

  8. Linux下tar.xz结尾的文件的解压方法

    $xz -d ***.tar.xz $tar -xvf  ***.tar 可以看到这个压缩包也是两层压缩,外面是xz压缩方式,里层是tar压缩方式.

  9. 1分钟内检查Linux服务器性能的10条命令

    如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在?Netflix性能工程团队的Brendan Gregg写下了这篇博文,来看他们是怎样通过十条命 ...

  10. 在Delphi7中JSON遍历节点不支持使用IN处理方法

    相关资料:http://www.cnblogs.com/del/archive/2009/10/23/1588690.html Delphi2007源代码: procedure TForm1.Butt ...