Angularjs中的$watch

$watch 是在angularjs中常用的一个方法，他可以监听页面中的元素，在他们发生变化的时候，做出相应的变化。今天简单介绍一下我使用的两种用法。

监听一个对象

先来看一下他的基本用法：

1	$watch(string, function(), [optional]);

可以看到上面有三个参数，第一个是我们要监听的对象，他以字符串的方式呈现；

第二个参数是一个回调函数，他是我们在监听到变化是做的动作。他有三个参数：newValue，oldValue，scope。看名字就能知道这三个参数的含义：新值，旧值，当前作用域。

第三个参数是一个可选项，他是一个布尔值，使用angular.equals来比较对象，默认是false。

示例代码：

html部分：

...
<div ng-repeat='item in items'>  
    <span>{{item.title}}</span>  
    <input ng-model='item.quantity'>    
</div>
...

js部分：

$scope.items = [
	{ title: '西瓜', quantity: 8, price: 3.95 }, 
	{ title: '西红柿', quantity: 17, price: 12.95 }, 
	{ title: '苹果', quantity: 5, price: 6.95 }];
$scope.$watch('items', function(newValue) {
	if (newValue) {
	console.log("这是一个新值！");
 	}
}, true);

当我们改变输入框中的数字时，在控制台中就会出现这是一个新值！的字样。

监视多个对象

$watch 在监视两个对象的时候，后面的参数都和上面的相同，只有第一个是不一样的，变成了一个数组。

1	$watch('[object1, object2]', function(newValue), [optional]);

在监听两个变量的时候，我们看一下newValue是怎么个样子的：

下面的部分以项目中的指令为例：

1
2
3

scope.$watch('[instrumentType, discipline]', function(newValue) {
    console.log(newValue);
}, true);

监听了两个对象，反回来的当然也是两个对象了。那么我们就可在分别对这两个对象做一些事情，在第一个对象变化的时候和第二个对象变化的时候做不同的事情。

比如第一个变化的时候打印1，第二个变化的时候打印2：

scope.$watch('[instrumentType, discipline]', function(newValue) {
    if (newValue[0].selected && newValue[0].selected.id) {
    console.log("1");
	}
	if (newValue[1].selected && newValue[1].selected.id) {
	console.log("2");
	}
}, true);