首页 > 其他 > 详细

转载:Angular在页面加载很慢的时候,会出现双花括号的问题

时间:2018-07-10 19:49:42      阅读:175      评论:0      收藏:0      [点我收藏+]

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

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

1、ng-cloak

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

  1.  
    <div ng-cloak>
  2.  
    <h1>Hello {{ name }}</h1>
  3.  
    </div>

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

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

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

2、ng-bind

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

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

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

<div>
  <h1>Hello <span ng-bind="name"></span></h1>
</div>
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/weixin_39522730/article/details/78836987

转载:Angular在页面加载很慢的时候,会出现双花括号的问题

原文:https://www.cnblogs.com/loveAline/p/9291035.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!