我爱编程

$scope里的$watch方法

2018-05-11  本文已影响0人  一块糖吧

一.$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

}

上一篇 下一篇

猜你喜欢

热点阅读