本篇主要介绍$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,不明白它究竟是在监测什么东西的变化.