angularjs的$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(newValue,oldValue){
//do something
}