一.$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不添加第三个参数:
如果直接监听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
}