Angular.js中使用$watch监听模型变化

由Goofy发布在前端开发

先说基本的

$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

 

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

  1. watchExpression：监听的对象，它可以是一个angular表达式如’name’,或函数如function(){return $scope.name}。
  2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
  3. objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

简单的实现看书好了，我这里重点要说的是监听多个值。

$watch监听多个值

 

从第一个参数的说明里可以看出，可以用这样的函数做监听对象function(){return $scope.name}。

就是函数返回的值改变了，我们就认为值变了。

 

那么我们用这个方法监听多个值，如下：
$scope.$watch(function () {
return JSON.stringify([$scope.name, $scope.value])
}, function (newVal,oldVal) {
//...
});

以上面的方式就可以同时监听该作用域（$scope）下的name和value两个值了。

 

关于$watchCollection

该方法允许我们为对象的属性或者数组的元素设置浅(一层)监控。

发表回复