天天看點

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