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

大佬教程收集整理的这篇文章主要介绍了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.code.net/article/8...

大佬总结

以上是大佬教程为你收集整理的angluarjs中页面初始化的时候会出现语法{{}}在页面中问题全部内容，希望文章能够帮你解决angluarjs中页面初始化的时候会出现语法{{}}在页面中问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。