詳解Angular的數(shù)據(jù)顯示優(yōu)化處理

更新時間：2016年12月26日 16:28:14 作者：小謝53

本文主要對Angular的數(shù)據(jù)顯示優(yōu)化處理進行詳細介紹，具有一定的參考價值，下面跟著小編一起來看下吧

前面的幾篇文章中，我們通過{{}}來渲染數(shù)據(jù)，今天就來聊聊它。

<div ng-controller="Aaa">
 <div>{{text}}</div>
</div>
<script type="text/javascript">
　　 alert(123);
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

問題顯而易見了，當我們沒有點擊確定的時候，下面的代碼是不會執(zhí)行的，所以也沒回一直呈現(xiàn){{text}}的狀態(tài)，假設網(wǎng)絡的帶寬很慢的情況下，js腳本還沒有加載進來，頁面全是{{}}這樣的符號，顯然用戶體驗很顯然是不好的。

我們利用ng-bind指令可解決此問題。

<div ng-controller="Aaa">
 <div ng-bind="text"></div>
</div>
<script type="text/javascript">
 alert(123)
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){ 
 $scope.text = 'xiecg';
 }]);
</script>

是不是很棒 ? 問題來了，這里不單單只有一個text數(shù)據(jù)，有很多個，如何寫呢？

<div ng-controller="Aaa">
 <div ng-bind-template="{{text}},{{text}}"></div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

ng-bind-template="{{text}},{{text}}" 多個表單式

ng-bind="text" 單個表達式

看了上面的介紹，如果還是覺得在標簽上寫表達式不舒服可通過ng-cloak來解決。。。

<div ng-controller="Aaa">
 <div ng-cloak>{{text}}</div> ng-cloak在渲染之前是為none的，渲染結(jié)束後block
</div>
<script type="text/javascript">
 alert(123);
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

ng-cloak在渲染之前是為none的，渲染結(jié)束後block。

還補充一點，在引入angular的時候，header中會嵌入一段css樣式。

假設後端返回給我們一段文字，上面包含了{{}}這些符號，可通過ng-non-bindable來屏蔽angular解析。

<div ng-controller="Aaa">
 <div ng-non-bindable>{{text}}</div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

如果是一段html代碼，想解析的話就需要引入插件。。。

完整代碼:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>數(shù)據(jù)顯示優(yōu)化處理</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
</head>
<body>
<div ng-controller="Aaa">
 <div ng-bind-html="html"></div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',['ngSanitize']); //引入angular插件，需要在模塊依賴插件的模塊
 m1.controller('Aaa',['$scope',function($scope){
 $scope.html = '<h1>xiecg</h1>';
 }]);
</script>
</body>
</html>

下面在說說angular中處理樣式和屬性的操作吧。

樣式：

 <div ng-class="{red:true,yellow:true}">{{text}}</div>
 <div ng-controller="Aaa">
 <div ng-style="{{style}}">{{text}}</div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 //對象類型的數(shù)據(jù)也可以渲染成內(nèi)聯(lián)樣式
 $scope.style = {
 color : 'red',
 background : 'blue'
 };
 }]);
</script>

屬性：

<div ng-controller="Aaa">
 <a ng-href="{{url}}">baidu</a>
 <a ng-attr-href="{{url}}" ng-attr-title="{{text}}">baidu</a>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 $scope.url = 'https://www.baidu.com/';
 }]);
</script>

自定義屬性可通過ng-attr-**這樣的形式書寫。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: