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 ...
随机推荐
- SqlServer try catch 捕获不到的一些错误及解决方法
IF (OBJECT_ID('AA','U') IS NOT NULL) DROP TABLE AA CREATE TABLE AA(ID INT) SELECT * FROM AA --注:数据库当 ...
- JSSDK用法
参照微信官方文档,调试成功之后总结如下: 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 步骤二: ...
- bzoj5392 [Lydsy1806月赛]路径统计
传送门 分析 我们设sum[x]为小于等于x的点现在有多少联通 于是一个序列合法当且只当sum[R]-sum[L-1]=len且所有点度数不大于2 我们知道如果对于序列[L,R]满足条件则[L+1,R ...
- Luogu 3265 [JLOI2015]装备购买
BZOJ 4004 把所有不能相互表示出来的向量都买下,一定能得到最大能买的方案数. 求解线性无关向量可以高斯消元,最后没有变成$0$向量的就是基底. 本题还要求代价最小怎么办?我们只要先把所有向量按 ...
- python3--列表生成式
# Auther: Aaron Fan # 原始的写法:a = []for i in range(10): a.append(i*2)print(a) # 用列表生成式完成上面的写法:a = [i*2 ...
- Django-restframework25 Pagination（分页）
Django-restframework25 Pagination(分页) 2017年11月11日 15:14:36 敲代码的伪文青 阅读数:1021 标签: restful 更多 个人分类: res ...
- glib hash库GHashTable的使用实例
前言 hash表是一种key-value访问的数据结构,hash表存储的数据能够很快捷和方便的去查询.在很多工程项目都需要使用到hash表来存储数据.对于hash表的详细说明这里就不进行阐述了,不了解 ...
- swing中的分层
swing中的分层 摘自:https://blog.csdn.net/levelmini/article/details/26692205 2014年05月23日 12:42:56 阅读数:1244 ...
- 编写高质量代码改善C#程序的157个建议——建议31：在LINQ查询中避免不必要的迭代
建议31:在LINQ查询中避免不必要的迭代 无论是SQL查询还是LINQ查询,搜索到结果立刻返回总比搜索完所有的结果再将结果返回的效率要高. 示例代码: class MyList : IEnumera ...
- 来自网易云的黑科技，带尖角的div......
今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...