AngularJs解决表达式闪烁的问题（ng-cloak）
举例：
<!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）的更多相关文章
- Ng-cloak解决angularJs中的闪烁问题
引言 上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下. 在使用AngularJS开发评教移动端的时候,我们经常会看见在Chrome这类快 ...
- AngularJS的表达式、指令的学习（2）
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- C# 实现PNG文件的背景透明显示，解决动态显示闪烁问题 【转】
http://blog.sina.com.cn/s/blog_402c071e0102x4rl.html 以下内容,对于想要使用C#实现PNG图片背景透明显示,同时动态显示时无闪烁问题的人来说, ...
- C# 解决窗体闪烁
C# 解决窗体闪烁 在Windows窗体上造成“闪烁”的窗体上有很多控制.造成这种闪烁的原因有两个: 1.当控件需要被绘制时,Windows发送一个控件两个消息.第一个(WM_ERASEBKGND)导 ...
- AngularJS 解决 SEO 问题
由于 AngularJS 返回的是HTML模板,实际的内容需要执行JS以后才会填充进去,导致百度抓取蜘蛛抓不到,因此产生了 AngularJS 的 SEO 问题.经过几天的研究试验,我们的解决方案是这 ...
- AngularJS：表达式
ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...
- AngularJs 解决浏览器在初始化代码未加载完毕时 而出现闪烁的问题
1. ng-cloak; 因浏览器会先加载dom元素 而针对于{{pression}} 由于angularjs 还没加载完,会在页面出现闪烁 2.ng-bind; 用ng-bind代替{{expres ...
- 解决插值表达式闪烁问题 - v-cloak
v-cloak页面在js没有加载出来的时候,不显示该部分 linux可以通过响应式设计模式,来模拟2,3G网络 <!DOCTYPE html><html><head> ...
- vue 解析时表达式闪烁的问题
现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...
随机推荐
- saltstack系列(三)——zmq订阅/发布模式
zmq订阅发布模式 server端代码: #coding=utf-8 ''''' 服务端,发布模式 ''' import zmq from random import randrange contex ...
- GBK/ UTF-8/ UNICODE（字符编码）
在python2中:如果执行程序,在编译器中,因为默认的编码是ASCII码(英文),所以如果输入中文就会出现乱码,因此为了避免这种乱码的情况发生,在输入中文字符串之后,必须进行手动转码,将GBK/ U ...
- JavaWeb之JSP入门
JSP原理及执行过程 流程图分析 用户发起请求,用户通过浏览器访问jsp页面,浏览器将HTTP协议的请求部分发送到服务端. 服务端获取请求部分,分析请求,发现本次的请求的的是jsp页面,jsp引擎按照 ...
- Druid配置属性列表及含义
前两天,在排查springBoot使用双数据源出现的运行一段时候出现了数据库连接断开的问题的时候,查了很多关于Druid数据库连接池配置的文章,虽然最后问题的原因不是属性配置的问题,也可以说是 属性配 ...
- 四.python数据类型,语句
Python基础 阅读: 120476 Python是一种计算机编程语言.计算机编程语言和我们日常使用的自然语言有所不同,最大的区别就是,自然语言在不同的语境下有不同的理解,而计算机要根据编程语言执行 ...
- lunix tomcat重启脚步
[wlcf@iZbp12oby5qekkz14dlokeZ ~]$ cat restart_tomcat #!/bin/shif [ $# != 1 ] ; then echo "USAGE ...
- bootstrap页面效果图
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- CSS3动画设置后台登录页背景切换图片
CSS3的动画很实用很好用,简单几句话就可以做出一个好看而且过渡平滑的body背景图片,不多说,来来来,上代码 body{ animation:mybg 7s; -webkit-animation:m ...
- razor自定义函数 @helper 和@functions小结
from:http://www.cnblogs.com/jiagoushi/p/3904995.html asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的 ...
- 在IE11(Win10)中检查up6.2配置
1.按F12,打开调试模式 2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的. 3.打开脚本,up6.js ...