詳解Angular的資料顯示優化處理

前面的幾篇文章中，我們通過{{}}來渲染資料，今天就來聊聊它。

1 2 3 4 5 6 7 8 9 10

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

詳解Angular的資料顯示優化處理

問題顯而易見了，當我們沒有點選确定的時候，下面的代碼是不會執行的，是以也沒回一直呈現{{text}}的狀态，假設網絡的帶寬很慢的情況下，js腳本還沒有加載進來，頁面全是{{}}這樣的符号，顯然使用者體驗很顯然是不好的。

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

1 2 3 4 5 6 7 8 9 10

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

詳解Angular的資料顯示優化處理

是不是很棒 ? 問題來了，這裡不單單隻有一個text資料，有很多個，如何寫呢？

1 2 3 4 5 6 7 8 9

<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來解決。。。

1 2 3 4 5 6 7 8 9 10

<div ng-controller=

"Aaa"

<div ng-cloak>{{text}}</div> ng-cloak在渲染之前是為none的，渲染結束後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的，渲染結束後block。

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

詳解Angular的資料顯示優化處理

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

1 2 3 4 5 6 7 8 9

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

詳解Angular的資料顯示優化處理

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

完整代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!DOCTYPE HTML>

html

 ng-app

"myApp"

head

meta

 http-equiv

"Content-Type"

 content

"text/html; charset=utf-8"

/>

title

>資料顯示優化處理</

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的資料顯示優化處理

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

樣式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

//對象類型的資料也可以渲染成内聯樣式

$scope.style = {

color :

'red'

background :

'blue'

};

}]);

</script>

屬性：

1 2 3 4 5 6 7 8 9 10 11

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

繼續閱讀