解决AngualrJS页面刷新导致异常显示问题

2019独角兽企业重金招聘Python工程师标准>>>

解决AngualrJS页面刷新导致异常显示问题

为什么在刷新页面的时候，总是先显示一下代码 就是“{{msg}}”，然后出现 $scope.msg="你好！！"； 中的“你好”呢？这样子交互效果非常不好，能不能找个方法解决呢？

答：我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。 这种情况被叫做Flash Of Unrendered Content (FOUC)。以下几种方法可以解决这个问题：

1、ng-cloak ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：

<div ng-cloak>
  <h1>Hello {{ name }}</h1>
</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://my.oschina.net/lixiaoyan/blog/1510445