angular學習筆記(十四)-$watch(1)

詩&遠方發表於2014-05-12
Angular筆記

本篇主要介紹$watch的基本概念:

$watch是所有控制器的$scope中內建的方法:

$scope.$watch(watchObj,watchCallback,ifDeep)

watchObj:

需要被檢測的物件,可以是以下任意一種:

1. 某個資料,監測這個資料的值是否發生變化

2. 一條angular表示式,監測表示式的結果是否發生變化

3. 函式(),監測函式的返回值是否發生變化

注意,以上三種,無論是哪種,都應該是字串格式,並且都是在$scope作用域下執行的.

4.函式,非字串格式,而是直接傳入一個函式,可以直接寫一個匿名函式,也可以傳入一個函式,注意,它不是在$scope作用域下的,所以,如果傳入的是當前作用域下的函式,還是需要寫:$scope.fun

watchCallback :

接受一個函式或者表示式,當watchObj發生變化是會被呼叫或執行.

如果是函式形式,它會收到三個引數:

watchCallback (newValue,oldValue,scope)

newValue: watchObj的新的值 

oldValue: watchObj的舊的值

scope: 就是當前控制器的$scope

注意:函式或者表示式不是在$scope作用域下執行的,所以,如果是需要呼叫當前作用域下的某個函式,應該$scope.watchCallback

ifDeep: 

一個布林值

如果 watchObj 的型別是物件或者陣列的時候, ifDeep值設定為true, 那麼angular會檢測被監控物件的每個屬性是否發生了變化,而不只是檢測一個簡單的值.

 

最後,$(watch)會返回一個函式,這個函式可以用來銷燬該控制器,只需要被呼叫一次即可:

var destroy = $scope.$watch(...);

destroy()

 

下面看個最基本的例子:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>11.1$watch監控資料變化</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
  </style>
</head>
<body>
<div ng-controller = "Watch">
  <input type="text" ng-model="number"/>
  <span>{{result}}</span>
</div>
</body>
</html>
function Watch ($scope){
    $scope.number = 0;
    $scope.count = function(newValue,oldValue,scope){
        $scope.result = $scope.number*3;
        console.log(newValue);
        console.log(oldValue);
        console.log(scope);
        return $scope.result
    };
    $scope.$watch('number',$scope.count,false)
}

我們監測了number這個資料,當number發生變化時,即呼叫count這個函式,改變result的值.

其中,count中的三個引數分別接受了number的新值,舊值,以及當前控制器的$scope:

比如我在文字域中輸入3:

 

------------------------------------------------------------------------------------------------------------------------------------

遺留問題:

在$watch的第一個引數中傳入一個函式時,即使該函式並沒有返回值,一樣可以被監測.so,不明白它究竟是在監測什麼東西的變化. 

例子可以參考下一篇筆記http://www.cnblogs.com/liulangmao/p/3723385.html

 

相關文章