Angular中$scope的$watch

Angular中scope的watch

$watch的作用

• apply触发脏检查实际上是通过digest，而当digest执行时，如果watch观察的value与上次执行的不一样时，就会触发。
• $watch可以对Angular的model进行监听，判断model值是否发生改变，可以获取到旧值和新值。

$watch的用法

刚刚说了watch可以对一个model进行监听，我们先看看watch长什么样。
它的函数名为$watch(watchFn,watchAction,deepWatch);

• watchFn为model的名字，可以是一个变量，对象，或者是数组
• watchAction是当监听触发时回调的函数是一个function
• deepWatch是一个布尔值，当监听的model是一个对象或者数组时，并且deepWatch的值为ture时，会监听到model的每一个item或者每个属性是否发生变化。

看了上面一堆的文字可以会有点烦对不对？那我们用代码来实现$watch是如何对一个model进行监听的。我们先看看对一个变量是如何进行监听的代码如下:
首先是html代码

<div ng-app="wapp">    <div ng-controller="wcontrol">        <input type="text" ng-model="wname">    </div></div><script>var wapp=angular.module("wapp",[]);    wapp.controller("wcontrol",function($scope){        $scope.$watch("wname",function (newValue,oldValue) {            console.log("旧:"+oldValue);            console.log("新:"+newValue);        });    });</script>

当在编辑框输入时可以获取到新的值和旧的值。这里我就不贴图了，可以直接复制代码自行测试，记得导入angular.js
这个是对单个变量进行监听，这里并没有用到第三个参数deepWatch对不对？接下来我们对一个对象进行监听试试。代码如下:

<script>    var wapp=angular.module("wapp",[]);    wapp.controller("wcontrol",function($scope){        //对象obj        $scope.obj={            name:"xiaoming",            age:18        };        $scope.$watch("wname",function (newValue,oldValue) {           $scope.obj.name=newValue;//当wname值改变时更新obj的name        });        //对obj对象进行监听        $scope.$watch("obj",function (newValue,oldValue) {            console.log(newValue);        },true);    });</script>

在刚刚的代码之上进行了修改，通过编辑框输入的值去改变对象obj的值，当obj改变时会触发$watch的回调函数。这里不贴图啦，要检测可直接复制代码自行测试。

以上是watch的用法，watch主要是对angular的model进行监听，可以监听一个对象，数组等。

有什么错误希望能够指出，共同进步!