Angular中的$watch方法詳解

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:29:42

Angular中的$watch方法詳解

Angular中的$watch方法詳解:在$apply方法中提到過臟檢查，首先apply方法會(huì)觸發(fā)evel方法，當(dāng)evel方法解析成功后，會(huì)去觸發(fā)digest方法，digest方法會(huì)觸發(fā)watch方法。 (1)$watch簡(jiǎn)介在digest執(zhí)行時(shí)，如果watch觀察的的value與上一次執(zhí)行時(shí)不一樣時(shí)，就會(huì)被觸發(fā)。 AngularJS內(nèi)部

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Angular中的$watch方法詳解:在$apply方法中提到過臟檢查，首先apply方法會(huì)觸發(fā)evel方法，當(dāng)evel方法解析成功后，會(huì)去觸發(fā)digest方法，digest方法會(huì)觸發(fā)watch方法。 (1)$watch簡(jiǎn)介在digest執(zhí)行時(shí)，如果watch觀察的的value與上一次執(zhí)行時(shí)不一樣時(shí)，就會(huì)被觸發(fā)。 AngularJS內(nèi)部

在$apply方法中提到過臟檢查，首先apply方法會(huì)觸發(fā)evel方法，當(dāng)evel方法解析成功后，會(huì)去觸發(fā)digest方法，digest方法會(huì)觸發(fā)watch方法。

(1)$watch簡(jiǎn)介

在digest執(zhí)行時(shí)，如果watch觀察的的value與上一次執(zhí)行時(shí)不一樣時(shí)，就會(huì)被觸發(fā)。

AngularJS內(nèi)部的watch實(shí)現(xiàn)了頁(yè)面隨model的及時(shí)更新。

$watch方法在用的時(shí)候主要是手動(dòng)的監(jiān)聽一個(gè)對(duì)象，但對(duì)象發(fā)生變化時(shí)觸發(fā)某個(gè)事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表達(dá)式或函數(shù)的字符串

watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會(huì)被調(diào)用

deepWatch：可選的布爾值命令檢查被監(jiān)控的對(duì)象的每個(gè)屬性是否發(fā)生變化

$watch會(huì)返回一個(gè)函數(shù)，想要注銷這個(gè)watch可以使用函數(shù)

(3)例子

在前面的例子中，當(dāng)name的表單改變30次，然后觸發(fā)某個(gè)事件。

控制器代碼如下：

var firstController = function ($scope){
 $scope.name='張三';
 $scope.count=0;
 // 監(jiān)聽一個(gè)model 當(dāng)一個(gè)model每次改變時(shí) 都會(huì)觸發(fā)第2個(gè)函數(shù)
 $scope.$watch('name',function(newValue,oldValue){
 ++$scope.count;
 if($scope.count > 30){
 $scope.name = '已經(jīng)大于30次了';
 }
 });
}

html代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <div ng-app="">
 <div ng-controller="firstController">
 <input type="text" value="" ng-model="name"/>
 改變次數(shù):{{count}}-{{name}}
 </div>
 </div>
 <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

運(yùn)行效果如下：

前30次可以隨意修改：

當(dāng)修改了30次后，name固定為'已經(jīng)大于30次了'：

這就是watch的作用，model每一次改變時(shí)都會(huì)觸發(fā)第二個(gè)函數(shù)。

(4)watch的第三個(gè)參數(shù)

當(dāng)監(jiān)聽的為一個(gè)對(duì)象或者數(shù)組時(shí)，例如：

 $scope.data = {
 name :'李四',
 count:20
 }

此時(shí)data里的name和count都要監(jiān)聽，那么可以這么寫：

 $scope.$watch('data',function(){
 },true)

如果不加第三個(gè)參數(shù)，那么只會(huì)監(jiān)聽data，只有當(dāng)data引用改變時(shí)才會(huì)觸發(fā)。

因此當(dāng)需要監(jiān)聽一些引用對(duì)象需要把第三個(gè)參數(shù)設(shè)置成true。

總結(jié)

以上所述是小編給大家介紹的Angular中的$watch方法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular中的$watch方法詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：中的 watch 方法解析

熱門焦點(diǎn)

Angular中的$watch方法詳解

Angular中的$watch方法詳解

Angular中的$watch方法詳解

最新推薦

猜你喜歡

熱門推薦