Angular中的$watch方法詳解
在$apply方法中提到過臟檢查，首先apply方法會觸發(fā)evel方法，當evel方法解析成功后，會去觸發(fā)digest方法，digest方法會觸發(fā)watch方法。
(1)$watch簡介
在digest執(zhí)行時，如果watch觀察的的value與上一次執(zhí)行時不一樣時，就會被觸發(fā)。
AngularJS內(nèi)部的watch實現(xiàn)了頁面隨model的及時更新。
$watch方法在用的時候主要是手動的監(jiān)聽一個對象，但對象發(fā)生變化時觸發(fā)某個事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達式或函數(shù)的字符串
watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用
deepWatch：可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化
$watch會返回一個函數(shù)，想要注銷這個watch可以使用函數(shù)
(3)例子
在前面的例子中，當name的表單改變30次，然后觸發(fā)某個事件。
控制器代碼如下：
var firstController = function ($scope){
$scope.name='張三';
$scope.count=0;
// 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數(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>
運行效果如下：
前30次可以隨意修改：
當修改了30次后，name固定為'已經(jīng)大于30次了'：
這就是watch的作用，model每一次改變時都會觸發(fā)第二個函數(shù)。
(4)watch的第三個參數(shù)
當監(jiān)聽的為一個對象或者數(shù)組時，例如：
$scope.data = {
name :'李四',
count:20
}
此時data里的name和count都要監(jiān)聽，那么可以這么寫：
$scope.$watch('data',function(){
},true)
如果不加第三個參數(shù)，那么只會監(jiān)聽data，只有當data引用改變時才會觸發(fā)。
因此當需要監(jiān)聽一些引用對象需要把第三個參數(shù)設(shè)置成true。
總結(jié)
以上所述是小編給大家介紹的Angular中的$watch方法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Angular 4依賴注入學習教程之InjectToken的使用（八）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之InjectToken使用的相關(guān)資料，文中介紹的非常詳細，對大家學習或者使用Angular4具有一定的參考學習價值，需要的朋友們下面來跟著小編一起學習學習吧。2017-06-06
本篇文章主要介紹了詳解angular element()方法使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Angular.js組件之input mask對input輸入進行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對input輸入進行格式化的相關(guān)內(nèi)容，文中通過示例代碼詳細介紹了將銀行卡號和日期的方法，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-07-07
Angular中ng-bind和ng-model的區(qū)別實例詳解
這篇文章主要介紹了Angular中ng-bind和ng-model的區(qū)別實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
AngularJS基礎(chǔ) ng-cloak 指令簡單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡單的代碼實例及效果圖,學習AngularJS指令的朋友可以參考下2016-08-08
angularjs http與后臺交互的實現(xiàn)示例
這篇文章主要介紹了angularjs http與后臺交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了angular中使用路由和$location切換視圖,需要的朋友可以參考下2015-01-01
本文主要介紹AngularJS國際化的知識，這里整理了相關(guān)資料和示例代碼以及實現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對自定義工廠和服務(wù)的創(chuàng)建來講,需要的朋友可以參考下2015-06-06
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。2017-07-07