Angular中的$watch方法詳解

來源：懂視網責編：小采時間：2020-11-27 22:29:42

Angular中的$watch方法詳解

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

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular中的$watch方法詳解:在$apply方法中提到過臟檢查，首先apply方法會觸發evel方法，當evel方法解析成功后，會去觸發digest方法，digest方法會觸發watch方法。 (1)$watch簡介在digest執行時，如果watch觀察的的value與上一次執行時不一樣時，就會被觸發。 AngularJS內部

在$apply方法中提到過臟檢查，首先apply方法會觸發evel方法，當evel方法解析成功后，會去觸發digest方法，digest方法會觸發watch方法。

(1)$watch簡介

在digest執行時，如果watch觀察的的value與上一次執行時不一樣時，就會被觸發。

AngularJS內部的watch實現了頁面隨model的及時更新。

$watch方法在用的時候主要是手動的監聽一個對象，但對象發生變化時觸發某個事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表達式或函數的字符串

watchAction(newValue,oldValue,scope):watchFn發生變化會被調用

deepWatch：可選的布爾值命令檢查被監控的對象的每個屬性是否發生變化

$watch會返回一個函數，想要注銷這個watch可以使用函數

(3)例子

在前面的例子中，當name的表單改變30次，然后觸發某個事件。

控制器代碼如下：

var firstController = function ($scope){
 $scope.name='張三';
 $scope.count=0;
 // 監聽一個model 當一個model每次改變時 都會觸發第2個函數
 $scope.$watch('name',function(newValue,oldValue){
 ++$scope.count;
 if($scope.count > 30){
 $scope.name = '已經大于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"/>
 改變次數:{{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>

運行效果如下：

前30次可以隨意修改：

當修改了30次后，name固定為'已經大于30次了'：

這就是watch的作用，model每一次改變時都會觸發第二個函數。

(4)watch的第三個參數

當監聽的為一個對象或者數組時，例如：

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

此時data里的name和count都要監聽，那么可以這么寫：

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

如果不加第三個參數，那么只會監聽data，只有當data引用改變時才會觸發。

因此當需要監聽一些引用對象需要把第三個參數設置成true。

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular中的$watch方法詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽：中的 watch 方法解析

熱門焦點

Angular中的$watch方法詳解

Angular中的$watch方法詳解

Angular中的$watch方法詳解

最新推薦

猜你喜歡

熱門推薦