为什么在刷新页面的时候,总是代码闪一下消失再出现 效果

p_18810183750 AngularJS 进阶 最后由 番茄_jk 于2015年11月13日回复

  • 1 回答
  • 6.2k 浏览

为什么在刷新页面的时候,总是先显示一下代码 就是“{{msg}}”,然后出现

  $scope.msg="你好!!"; 中的“你好”呢?这样子交互效果非常不好,能不能找个方法解决呢?

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

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

    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>
    
  • 0 评论