一.$watch的作用
監聽model,如果model發生變化,則觸發某些事情。
二.$watch的格式
$scope. $watch(watchFn,watchAction,deepWatch);
解釋:
watchFn:表示一個,angular表達式或者函數的字符串。
watchAction:watchFn發生變化的時候觸發此函數,參數為一個function。
deepWatch:可選的布爾值命令,檢查被監控的每個屬性是否發證變化,只對監聽對象時有用,如果第三個參數為true則被監聽對象的每一個屬性變更都會觸發第二個參數function,如果為false則只檢查監聽對象的對象引用地址,如果屬性變了,但是引用地址沒變,不會觸發,除非你改為了其他對象。
三.實例
1.$watch 單一的變量
對於普通的變量時,如數字,字符串等,直接如下寫是可以監視到變量的變化,並執行相應的函數的。
$scope.count=1;
$scope.$watch('count',function(){
...
});
2.$watch 多個變量
對於多個變量的監視變化,執行同一函數的話,可以將這幾個變量轉為字符串,以‘+’號隔開來進行監視
//當count或page變化時,都會執行這個匿名函數
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});
3.$watch對象或數組
3.1不添加第三個參數:






如果直接監聽user是改變輸入框是不會有值的。
3.2添加第三個參數:

不管哪個輸入框的值發生改變都會有彈框出現。
4.$watch 函數的返回結果
在寫代碼的時候,有時會遇到要監視一個函數返回的結果是否變化的情況,所以查了一下$watch 監視函數的情況。
$scope.todoList = []; //可改變
$scope.fun=function(){
var count =0;
angular.forEach($scope.todoList,function(todo){
count += todo.done ?0:1;
});
return count;
};
$scope.$watch('fun()',function(data){
console.log(data); //獲取到數據
});
5.取消$watch
var fun=$scope.$watch('todoList',function(){
//調用fun()取消這個watch
fun();
});
自己項目中的用法:
$scope.$watch(angular.bind(vm, function () {
// do somethin監聽某個值的變化。
}), nextFunction, true);
function nextFunction(oldValue,newValue){
//do something
}