举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*[ng-cloak] 属性选择器 匹配所有包含这个属性的元素*/

    .ng-cloak,

    [ng-cloak] {

        display: none;

    }

    </style>

</head>

<body ng-app>

    <!-- 闪烁就是 表达式 在angularJS 还没识别之前 本来就是直接输出 然angular过了几百毫秒就识别了表达式 然后把大括号去掉 -->

    <!-- 原因就是angularJS 的代码加载需要时间  -->

    <!-- ng-cloak 这个类名或者属性 等angularJS加载出来之后就会把他删掉 -->

    <h1 ng-cloak class="ng-cloak">{{999999}}</h1>

    <h1 ng-cloak>{{"你好"}}</h1>

    <h1 ng-cloak>{{1+2}}</h1>

    <h1 ng-bind="'要绑定的值'"></h1>

    <h1 ng-bind="'萨瓦迪卡'"></h1>

    <!-- 1.引包 -->

    <script src="node_modules/angular/angular.js"></script>

    <!-- 1. 是吧angularJS的引包代码放到表达式的前面引入进来 (但是这种方式不推荐 因为JS代码是放到后面执行的因为JS代码影响页面渲染 不能再前面引入 得等页面和CSS加载完了再加载JS) -->

    <!-- 2. 使用ng-bind的方式 实现绑定表达式(或者值)到标签上 这种方式由于是angular的指令代码 只能等angualrJS出来了才能识别 才会生效 所以不会出现闪烁问题 -->

    <!-- 3. 使用ng-cloak类名或者属性 然后给这个类名加上display:none的属性 angular执行的时候会把这个类名或者属性删除 -->

    <!-- 因为闪烁是样式性问题就用样式解决他 同时也保留了之前写表达式的写 -->

</body>

</html>

AngularJs解决表达式闪烁的问题（ng-cloak）的更多相关文章

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

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

  2. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  3. C# 实现PNG文件的背景透明显示，解决动态显示闪烁问题 【转】

    http://blog.sina.com.cn/s/blog_402c071e0102x4rl.html    以下内容,对于想要使用C#实现PNG图片背景透明显示,同时动态显示时无闪烁问题的人来说, ...

  4. C# 解决窗体闪烁

    C# 解决窗体闪烁 在Windows窗体上造成“闪烁”的窗体上有很多控制.造成这种闪烁的原因有两个: 1.当控件需要被绘制时,Windows发送一个控件两个消息.第一个(WM_ERASEBKGND)导 ...

  5. AngularJS 解决 SEO 问题

    由于 AngularJS 返回的是HTML模板,实际的内容需要执行JS以后才会填充进去,导致百度抓取蜘蛛抓不到,因此产生了 AngularJS 的 SEO 问题.经过几天的研究试验,我们的解决方案是这 ...

  6. AngularJS：表达式

    ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...

  7. AngularJs 解决浏览器在初始化代码未加载完毕时 而出现闪烁的问题

    1. ng-cloak; 因浏览器会先加载dom元素 而针对于{{pression}} 由于angularjs 还没加载完,会在页面出现闪烁 2.ng-bind; 用ng-bind代替{{expres ...

  8. 解决插值表达式闪烁问题 - v-cloak

    v-cloak页面在js没有加载出来的时候,不显示该部分 linux可以通过响应式设计模式,来模拟2,3G网络 <!DOCTYPE html><html><head> ...

  9. vue 解析时表达式闪烁的问题

    现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...

随机推荐

  1. 关于box-sizing属性

    写在前面 文中错误或不足之处欢迎指正批评,共同交流! 在项目中写css组件时遇到一个问题: 要求两个按钮均分其父元素宽度,且父元素宽度不固定,像这样: 第一反应很自然的想到使用flex布局,但是由于需 ...

  2. PHP防止木马攻击的措施

    防止跳出web目录 只允许你的PHP脚本在web目录里操作,针对Apache,还可以修改httpd.conf文件限制PHP操作路径. 例如:php_admin_value  open_basedir( ...

  3. IE8下javascript的时间函数Date()不兼容问题，显示NAN【转】

    function parseISO8601(dateStringInRange) {   var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,       dat ...

  4. 在Global.asax文件的Application_BeginRequest中获取request请求内容

    protected void Application_BeginRequest(object sender, EventArgs e) { try { string isLogRequest = Sy ...

  5. web端测试点汇总

    前言 前面一篇文章讲解了app测试一些功能点.那么相应的也梳理一下web测试相关的功能的测试点吧,此篇文章只是给你们一个思路,如果要涉及web端每个测试点,基本不可能实现的,所以只是提供一个设计的思路 ...

  6. location.reload() 和 location.replace()的区别和应用

    首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 fals ...

  7. DB2 添加license

    DB2 - DB2COPY1 - DB2-0 服务不能启动报的错是这样的:Microsoft Management Console   Windows 不能在 本地计算机 启动 DB2 - DB2.有 ...

  8. C# Socket 发送&接收&返回

    因为工作比较忙,好久没有写过博客了,最近因项目需求,需要用到Socket来进行通信,简单写了几个例子,记录一下,代码很简单,无非就是接收与发送,以及接收到数据后返回一个自定义信息,也可以说是发送. 先 ...

  9. Castle Windsor

    让我们从Web API的集成点开始,它们是IDependencyResolver和IDependencyScope接口.IDependencyResolver和其他接口的名称可能与MVC中的接口相同, ...

  10. My97DatePicker常用日期格式

    WdatePicker({ minDate: '%y-%M-%d', maxDate: '#F{$dp.$D(\'GradeEndDate\',{d:-1});}' }); WdatePicker({ ...