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