博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular在页面加载很慢的时候,会出现双花括号的问题
阅读量:6936 次
发布时间:2019-06-27

本文共 681 字,大约阅读时间需要 2 分钟。

hot3.png

我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。

这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.以下几种方法可以解决这个问题:

1、ng-cloak

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

 

Hello {
{ name }}

在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的。

在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class

 

Hello {
{ name }}

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

使用ng-bind替代{

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

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

{ }}了

 

Hello

 

转载于:https://my.oschina.net/u/2391658/blog/3004117

你可能感兴趣的文章
Java基础概念(一)
查看>>
iOS 排序算法总结、二分法查找
查看>>
oracle查询语句注意事项:
查看>>
第166天:canvas绘制饼状图动画
查看>>
Reporting service个人使用经验
查看>>
数学2.Latex扫盲
查看>>
去除Coding4Fun中MessagePrompt的边框(Border)
查看>>
参数文件
查看>>
各指数的历史-市盈率平均估值
查看>>
也说_T、_TEXT、TEXT、L
查看>>
swiftsuspenders Memo
查看>>
生成动态验证码的jsp
查看>>
SJCL:斯坦福大学JS加密库
查看>>
SharpWebMail介绍和安装(转)
查看>>
装好Centos7后提示Initial setup of CentOS Linux 7 (core)
查看>>
mysql + Fluently NHibernate + WebAPI + Autofac
查看>>
返回顶部及去底部
查看>>
Unity镜子效果的实现(无需镜子Shader)
查看>>
删除一个数的K位使原数变得最小
查看>>
牛客小白月赛6 水题 求n!在m进制下末尾0的个数 数论
查看>>