angular之$watch方法詳解

時間 2019-12-10

標籤 angular watch 方法詳解欄目 AngularJS 简体版

原文原文鏈接

在$apply方法中提到過髒檢查，首先apply方法會觸發evel方法，當evel方法解析成功後，會去觸發digest方法，digest方法會觸發watch方法。javascript

(1)$watch簡介html

在digest執行時，若是watch觀察的的value與上一次執行時不同時，就會被觸發。java

AngularJS內部的watch實現了頁面隨model的及時更新。angularjs

$watch方法在用的時候主要是手動的監聽一個對象，但對象發生變化時觸發某個事件。數組

(2)watch方法用法app

$watch(watchFn,watchAction,deepWatch)函數

watchFn:angular表達式或函數的字符串spa

watchAction(newValue,oldValue,scope):watchFn發生變化會被調用code

deepWatch：可選的布爾值命令檢查被監控的對象的每一個屬性是否發生變化htm

$watch會返回一個函數，想要註銷這個watch能夠使用函數

(3)例子

在前面的例子中，當name的表單改變30次，而後觸發某個事件。

控制器代碼以下：

 
        var  
        firstController =  
        function  
        ($scope){ 
       
        $scope.name= 
        '張三' 
        ; 
       
        $scope.count=0; 
       
        // 監聽一個model 當一個model每次改變時 都會觸發第2個函數 
       
        $scope.$watch( 
        'name' 
        , 
        function 
        (newValue,oldValue){ 
       
        ++$scope.count; 
       
        if 
        ($scope.count > 30){ 
       
        $scope.name =  
        '已經大於30次了' 
        ; 
       
        } 
       
        }); 
       
        }

html代碼以下：

 
        <!DOCTYPE html> 
       
        < 
        html 
        > 
       
        < 
        head 
        > 
       
        < 
        meta  
        charset 
        = 
        "utf-8" 
        > 
       
        </ 
        head 
        > 
       
        < 
        body 
        > 
       
        < 
        div  
        ng-app 
        = 
        "" 
        > 
       
        < 
        div  
        ng-controller 
        = 
        "firstController" 
        > 
       
        < 
        input  
        type 
        = 
        "text"  
        value 
        = 
        ""  
        ng-model 
        = 
        "name" 
        /> 
       
        改變次數:{{count}}-{{name}} 
       
        </ 
        div 
        > 
       
        </ 
        div 
        > 
       
        < 
        script  
        type 
        = 
        "text/javascript"  
        src 
        = 
        "app/index.js" 
        ></ 
        script 
        > 
       
        < 
        script  
        type 
        = 
        "text/javascript"  
        src 
        = 
        "../../vendor/angular/angularjs.js" 
        ></ 
        script 
        > 
       
        </ 
        body 
        > 
       
        </ 
        html 
        >

運行效果以下：

前30次能夠隨意修改：

當修改了30次後，name固定爲'已經大於30次了'：

這就是watch的做用，model每一次改變時都會觸發第二個函數。

(4)watch的第三個參數

當監聽的爲一個對象或者數組時，例如：

 
        $scope.data = { 
       
        name : 
        '李四' 
        , 
       
        count:20 
       
        }

此時data裏的name和count都要監聽，那麼能夠這麼寫：

 
        $scope.$watch( 
        'data' 
        , 
        function 
        (){ 
       
        }, 
        true 
        )

若是不加第三個參數，那麼只會監聽data，只有當data引用改變時纔會觸發。

所以當須要監聽一些引用對象須要把第三個參數設置成true。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。