轉載地址：http://www.cnblogs.com/liulangmao/p/3722885.html
本篇主要介紹$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,不明白它究竟是在監測什麼東西的變化.