首页 技术 正文
技术 2022年11月9日
0 收藏 647 点赞 3,028 浏览 1544 个字

angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。
出现这个的原因是:由于页面或者组件需要渲染加载数据,浏览器和angluarjs渲染页面需要消耗一定的时间,虽然这个时间很多,可能肉眼看不出来,但有的时候加载时间比较长的时候,特别是网络等原因。这样就看到了在渲染前的带有语法的页面。
解决的办法如下:

1.ng-cloak

ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:

<div ng-cloak>
<h1>Hello {{ name }}</h1>
</div>

Ng-cloak实现原理为一个directive,页面初始化是在DOMhead增加一行CSS代码,如下:

<pre class= “prettyprint linenums”>
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none ! important;
}
</pre>
<pre class= “prettyprint linenums”>
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none ! important;
}
</pre>

Angular将带有ng-cloak的元素设置为display:none.在等到angular解析到带有ng-cloak节点的时候,会把元素上ng-cloak attribute和calss同时remove掉,这样就防止了节点的闪烁。如下:

script type =”text/ng-template” id =”scenario.js-150”>  It(‘should remove the template directive and css class',function(){ Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))  not().toBeDefined();   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).Not().toBeDefined();});</script><script type =”text/ng-template” id =”scenario.js-150”>  It(‘should remove the template directive and css class',function(){ Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))  not().toBeDefined();   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).Not().toBeDefined();});</script>

2.ng-bind

ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上;

使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。

上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了

<div>
<h1>Hello <span ng-bind="name"></span></h1>
</div>

参考地址:http://www.jb51.net/article/8…

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,489
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,128
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,290