$scope裏的$watch方法

一.$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不添加第三個參數：

 

不添加第三個參數測試代碼

 

沒有輸入時的結果

 

name輸入框輸入內容

 

 

年齡輸入框輸入內容

 

若是直接監聽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

}