$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

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM