$scope里的$watch方法

一.$watch的作用

监听model，如果model发生变化，则触发某些事情。

二.$watch的格式

$scope. $watch(watchFn,watchAction,deepWatch);

解释：

watchFn：表示一个，angular表达式或者函数的字符串。

watchAction：watchFn发生变化的时候触发此函数，参数为一个function。

deepWatch：可选的布尔值命令，检查被监控的每个属性是否发证变化，只对监听对象时有用，如果第三个参数为true则被监听对象的每一个属性变更都会触发第二个参数function，如果为false则只检查监听对象的对象引用地址，如果属性变了，但是引用地址没变，不会触发，除非你改为了其他对象。

三.实例

1.$watch 单一的变量

对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。

$scope.count=1;

$scope.$watch('count',function(){

...

});

2.$watch 多个变量

对于多个变量的监视变化，执行同一函数的话，可以将这几个变量转为字符串，以‘+’号隔开来进行监视

//当count或page变化时，都会执行这个匿名函数

$scope.count=1;

$scope.page=1;

$scope.$watch('count + page',function(){

...

});

3.$watch对象或数组

3.1不添加第三个参数：

 

不添加第三个参数测试代码

 

没有输入时的结果

 

name输入框输入内容

 

 

年龄输入框输入内容

 

如果直接监听user是改变输入框是不会有值的。

3.2添加第三个参数：

 

添加第三个参数测试代码

不管哪个输入框的值发生改变都会有弹框出现。

4.$watch 函数的返回结果

在写代码的时候，有时会遇到要监视一个函数返回的结果是否变化的情况，所以查了一下$watch 监视函数的情况。

$scope.todoList = []; //可改变

$scope.fun=function(){

var count =0;

angular.forEach($scope.todoList,function(todo){

count += todo.done ?0:1;

});

return count;

};

$scope.$watch('fun()',function(data){

console.log(data); //获取到数据

});

5.取消$watch

var fun=$scope.$watch('todoList',function(){

//调用fun()取消这个watch

fun();

});

自己项目中的用法：

$scope.$watch(angular.bind(vm, function () {

// do somethin监听某个值的变化。

}), nextFunction, true);

function nextFunction(oldValue,newValue){

//do something

}