[工作问题]angluarjs中页面初始化的时候会出现语法{{}}在页面中问题

angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。
出现这个的原因是:由于页面或者组件需要渲染加载数据,浏览器和angluarjs渲染页面需要消耗一定的时间,虽然这个时间很多,可能肉眼看不出来,但有的时候加载时间比较长的时候,特别是网络等原因。这样就看到了在渲染前的带有语法的页面
解决的办法如下:

1.ng-cloak

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

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

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

<pre class= “prettyprint linenums”>
          [ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{
          Display:none ! important;
        }
        </pre>
        <pre class= “prettyprint linenums”>
          [ng\:cloak],.x-ng-cloak{
          Display:none ! important;
        } 
        </pre>

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>
     
    <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>

2.ng-bind

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

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

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

<div>
     <h1>Hello <span ng-bind="name"></span></h1>
    </div>

参考地址:http://www.jb51.net/article/80523.htm

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...