欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年12月26日 16:28:14   作者：小謝53  
本文主要對(duì)Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

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

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

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

我們利用ng-bind指令可解決此問(wèn)題。

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

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

<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}}"  多個(gè)表單式

 ng-bind="text"  單個(gè)表達(dá)式

看了上面的介紹，如果還是覺(jué)得在標(biāo)簽上寫表達(dá)式不舒服可通過(guò)ng-cloak來(lái)解決。。。

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

還補(bǔ)充一點(diǎn)，在引入angular的時(shí)候，header中會(huì)嵌入一段css樣式。

假設(shè)後端返回給我們一段文字，上面包含了{(lán){}}這些符號(hào)，可通過(guò)ng-non-bindable來(lái)屏蔽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>

下面在說(shuō)說(shuō)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';
 //對(duì)象類型的數(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>

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

  • 詳解Angular.js指令中scope類型的幾種特殊情況

    詳解Angular.js指令中scope類型的幾種特殊情況

    AngularJs最重要也是最難理解的模塊之一就是它的指令（directive）了，自定義指令配置有很多個(gè)參數(shù)，下面這篇文章主要介紹了關(guān)于Angular.js指令中scope類型的幾種特殊情況，需要的朋友可以參考下。
    2017-02-02
  • AngularJS 遇到的小坑與技巧小結(jié)

    AngularJS 遇到的小坑與技巧小結(jié)

    本文主要對(duì)AngularJS 遇到的小坑與技巧進(jìn)行了一個(gè)小小的總結(jié)，比較使用，希望能給大家做一個(gè)參考。
    2016-06-06
  • Angular 7工作方式事件綁定

    Angular 7工作方式事件綁定

    在本章中將討論事件綁定在Angular7中的工作方式,當(dāng)用戶以鍵盤移動(dòng),鼠標(biāo)單擊或鼠標(biāo)懸停的形式與應(yīng)用程序交互時(shí),它將生成一個(gè)事件,需要處理這些事件以執(zhí)行某種操作,考慮一個(gè)示例以更好地理解這一點(diǎn)
    2023-12-12
  • angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法

    angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法

    今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • AngularJS打開(kāi)頁(yè)面隱藏顯示表達(dá)式用法示例

    AngularJS打開(kāi)頁(yè)面隱藏顯示表達(dá)式用法示例

    這篇文章主要介紹了AngularJS打開(kāi)頁(yè)面隱藏顯示表達(dá)式用法,結(jié)合實(shí)例形式分析了AngularJS中打開(kāi)頁(yè)面隱藏顯示表達(dá)式相關(guān)命令使用技巧,需要的朋友可以參考下
    2016-12-12
  • 全面解析Angular中$Apply()及$Digest()的區(qū)別

    全面解析Angular中$Apply()及$Digest()的區(qū)別

    $apply()和$digest()在AngularJS中是兩個(gè)核心概念，但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下
    2016-08-08
  • AngularJS中controller控制器繼承的使用方法

    AngularJS中controller控制器繼承的使用方法

    這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • 解決angularjs WdatePicker ng-model的問(wèn)題

    解決angularjs WdatePicker ng-model的問(wèn)題

    今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Angularjs Promise實(shí)例詳解

    Angularjs Promise實(shí)例詳解

    Promise是一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve這幾個(gè)異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過(guò)實(shí)例代碼給大家講解angularjs promise 的相關(guān)知識(shí)，感興趣的朋友一起看看吧
    2018-03-03

    • 最新評(píng)論