angluarjs中页面初始化的时候会出现语法

前面的几篇文章中,我们通过{{}}来渲染数据,今天就来聊聊它。

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

 {{text}} alert; var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; }]);

1.ng-cloak

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

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

金沙js8331,Ng-cloak实现原理为一个directive,页面初始化是在DOMhead增加一行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],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .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>

问题显而易见了,当我们没有点击确定的时候,下面的代码是不会执行的,所以也没回一直呈现{{text}}的状态,假设网络的带宽很慢的情况下,js脚本还没有加载进来,页面全是{{}}这样的符号,显然用户体验很显然是不好的。

2.ng-bind

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

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

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

<div>
 <h1>Hello </h1>
</div>

参考地址:http://www.jb51.net/article/8…

我们利用ng-bind指令可解决此问题。

  alert var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; }]);

是不是很棒 ? 问题来了,这里不单单只有一个text数据,有很多个,如何写呢?

  var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; }]);

ng-bind-template=”{{text}},{{text}}” 多个表单式

ng-bind=”text” 单个表达式

看了上面的介绍,如果还是觉得在标签上写表达式不舒服可通过ng-cloak来解决。。。

 {{text}} ng-cloak在渲染之前是为none的,渲染结束后block alert; var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; }]);

ng-cloak在渲染之前是为none的,渲染结束后block。

还补充一点,在引入angular的时候,header中会嵌入一段css样式。

假设后端返回给我们一段文字,上面包含了{{}}这些符号,可通过ng-non-bindable来屏蔽angular解析。

 {{text}} var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; }]);

如果是一段html代码,想解析的话就需要引入插件。。。

完整代码:

 数据显示优化处理  var m1 = angular.module('myApp',['ngSanitize']); //&#24341;&#20837;angular&#25554;&#20214;&#65292;&#38656;&#35201;&#22312;&#27169;&#22359;&#20381;&#36182;&#25554;&#20214;&#30340;&#27169;&#22359; m1.controller('Aaa',['$scope',function{ $scope.html = '&lt;h1&gt;xiecg&lt;/h1&gt;'; }]);

下面在说说angular中处理样式和属性的操作吧。

样式:

 {{text}}  {{text}} var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; //&#23545;&#35937;&#31867;&#22411;&#30340;&#25968;&#25454;&#20063;&#21487;&#20197;&#28210;&#26579;&#25104;&#20869;&#32852;&#26679;&#24335; $scope.style = { color : 'red', background : 'blue' }; }]);

属性:

 baidu baidu var m1 = angular.module; m1.controller('Aaa',['$scope',function{ $scope.text = 'xiecg'; $scope.url = 'https://www.baidu.com/'; }]);

自定义属性可通过ng-attr-**这样的形式书写。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

发表评论

电子邮件地址不会被公开。 必填项已用*标注