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進行監聽，可以監聽一個對象，數組等。

有什麼錯誤希望能夠指出，共同進步!