ng-cloak_Ng-cloak解决angularJS中的闪烁问题

更新时间:2019-11-01    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

在用angularJS框架开发中,页面加载时会看到有表达式{{express}}或者过滤器{{express | filter}}在页面中闪过。这个问题是由于javascript操作DOM的时候,是等DOM结构都加载完成,才回头处理引用的angularJS文件。这是引起表达式或过滤器在页面闪烁的原因。

如何解决因加载顺序引起的闪烁呢?angularJS为我们提供了ng-cloak,我们可以在需要的地方加上ng-cloak。如:

  ……
 

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


     
          [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
     
            Display:none ! important;
     
    }
     

     

    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>

    本文来源:http://www.bbyears.com/wangyezhizuo/76665.html

热门标签

更多>>

本类排行