angularjs的$watch用法

半兽人 发表于: 2019-12-28   最后更新时间: 2020-03-30 22:40:28  
{{totalSubscript}} 订阅, 2,493 游览

$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
}
更新于 2020-03-30

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章