举例：

<!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. 详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化

    在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子详解这两个函数的作用. 1. ...

  2. 58. Length of Last Word最后一个单词的长度

    ［抄题］: [暴力解法]: 时间分析: 空间分析: [优化后]: 时间分析: 空间分析: ［奇葩输出条件］: ［奇葩corner case］: "b a " 最后一位是空格,可能误 ...

  3. 18-拍卖叫价(hdu2149 巴什博弈)

    http://acm.hdu.edu.cn/showproblem.php?pid=2149 Public Sale Time Limit: 1000/1000 MS (Java/Others)    ...

  4. 如何从Win7上卸载Sql 2008 R2 Express，再重装

    这两天,因工作需要,需要在一台新的机器上,Win7 64位英文操作系统上,安装Sql Server 2008 R2 Express,安装的过程中出现些问题,在查找问题的过程中,考虑重装 Sql Ser ...

  5. Unix基本系统数据类型和stat结构体

    Unix基本系统数据类型 历史上,某些UNIX变量已与某些C数据类型联系在一起,例如,历史上主.次设备号存放在一个1 6位的短整型中, 8位表示主设备号,另外8位表示次设备号.但是,很多较大的系统需要 ...

  6. c语言实践 统计输入的一串正整数里面奇数和偶数的个数

    怎么考虑这个问题. 首先先确定肯定是需要一个变量保存输入的数据的,我们叫它input,最后结果要的是个数,所以需要另外两个变量来保存奇数的个数和偶数的个数. int input int countJ ...

  7. ESP8266-iot-2

    1.SDK概述 复制相关的工程文件到HelloWorld里面 要在版本esp8266_nonos_sdk_v2.0.0_16_07_19上面开发,那么就要复制相应文件 然后打开IDE 导入HelloW ...

  8. Entity Framework Tutorial Basics（42）：Colored Entity

    Colored Entity in Entity Framework 5.0 You can change the color of an entity in the designer so that ...

  9. JSP内置对象与servlet对应关系

    隐式对象 说明 out 转译后对应JspWriter对象,其内部关联一个PringWriter对象 request 转译后对应HttpServletRequest/ServletRequest对象 r ...

  10. Requests接口测试(一)

    接口测试概念 接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点.测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关 ...