angularJS<六、$scope里的$watch方法>

                                               angularJS<六、$scope里的$watch方法>

1、$watch的作用

         主要用来监听model，如果model发生变化，则触发某些事情

 

比如我们前面说到的脏数据检查脏数据检查调用$apply方法，调用evel进行数据解析，再调用$digest方法进行检查 ，在$digest执行时候，如果$watch观察到value与上一次执行时不一样时候就会触发进行数据更新；

2、$watch的格式

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

   参数解释：

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

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

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

3、实例

   话不多说，直接上代码：

   先说下实现的功能，我们还是在作用域定义一个数字形变量，变量只允许输入小于100的数字切大于1的数字，如果不在该范围，则把变量的值改为0，此处没对字符串处理，所以请不要输入字符串和负数！

 

Html代码：

<divng-controller="controllerDemo">

         <inputtype="text"value=""ng-model="name">

         <hr>

         输入的值：{{name}}

      </div>

 

Controller.js代码：

var controllerDemo=function($scope){

$scope.name=0;        $scope.$watch("name",function(newValue,oldValue){

         if($scope.name>99||$scope.name<1){

            $scope.name=0;

         }

      });

}

 

测试情况如下：

当输入100以下

当你再输入超过100，则成了

 

可以自己测试一下

 

 

以上方法可以看出只用到了$watch的前两个参数，那么第三个参数怎么使用呢？下面，我们来看一下，当我们$scope作用域里面放的是一个对象user的时候，怎么处理！

 

我们需要对作用域user对象做监听，监听其每一个属性，只要有变更就弹框提示属性变更了，实现方式如下

Html代码：

   <divng-controller="controllerDemo">

         当作用域放入一个对象<br>

         name的model的input：<inputtype="text"value=""ng-model="user.name"><br>

         age的model的input：<inputtype="text"value=""ng-model="user.age">

        

         name的值：{{user.name}}<br>

         age的值:{{user.age}}

      </div>

 

Controller.js代码：

 

var controllerDemo=function($scope){

   $scope.user={

      name:"张三",

      age:20

   }

   $scope.$watch("user.name",function(newValue,oldValue){

      alert("user的name属性改为了"+$scope.user.name);

   });

   $scope.$watch("user.name",function(newValue,oldValue){

      alert("user的age属性变了"+$scope.user.age);

   });

}

测试结果：

 1，修改name

2，修改age的mode

 

假设我们的user有100个属性，那么我们是否就应该写入100个类似的监听方法！太过于复杂

 

这个时候我们就可以用$watch的第三个属性进行控制了，我们修改controller.js的代码如下：

var controllerDemo=function($scope){

   $scope.user={

      name:"张三",

      age:20

   }

   $scope.$watch("user",function(newValue,oldValue){

      alert("user属性变了");

   }，true);

}

 

测试结果，如下：

 

 

具体是哪个属性改变，在后期将做说明；