《AngularJS》----$apply 與 $watch

時間 2019-11-12

標籤 AngularJS apply watch 欄目 AngularJS 简体版

原文原文鏈接

在AngularJS的一些項目中，咱們常常用到$apply 與 $watch ，這兩個對象，這另個對象都依賴於$scope對象，其中，$apply應用與傳播modle的變化，而$watch是用來監測model的變化，這與AngularJS中的雙向數據綁定有很大的關係，下面咱們探討一下這兩個對象的基本用法。html

1、$apply()編程

1.一、$apply 方法做用：Scope提供$apply方法傳播Model的變化
1.二、$apply方法使用情景：AngularJS 外部的控制器（DOM 事件、外部的回調函數如 jQuery UI 空間等）調用了 AngularJS 函數以後，必須調用$apply。在這種狀況下，你須要命令 AngularJS 刷新自已（模型、視圖等），$apply 就是用來作這件事情的。
1.三、$apply方法注意事項：只要能夠，請把要執行的代碼和函數傳遞給$apply去執行，而不要自已執行那些函數而後再調用$apply。
舉例：數組

HTML代碼app

<!doctype html>  
<html ng-app="HelloAngular">  
    <head>  
        <meta charset="utf">  
    </head>  
    <body>  
        <div ng-controller="helloAngular">  
            {{name}} {{age}}  
        </div>  
    </body>  
    <script src="js/angular-1.3.0.js"></script>  
    <script src="HelloAngular_Module.js"></script>  
</html>

angularJS代碼函數

var myModule = angular.module("HelloAngular", []);  
myModule.controller("helloAngular", ['$scope',"$timeout",  
    function HelloAngular($scope,$timeout) {  
        $scope.name = "oldName";  
        $scope.age=20;  
        setTimeout(function(){  
          $scope.name = "newName";  
          $scope.age="21";  
           },2000);  
         }]);

效果是：兩秒以後，頁面的name 和 age都沒有變化，緣由是頁面沒法傳播model的變化，若是咱們這樣寫spa

var myModule = angular.module("HelloAngular", []);  
myModule.controller("helloAngular", ['$scope',"$timeout",  
    function HelloAngular($scope,$timeout) {  
        $scope.name = "oldName";  
        $scope.age=20;  
        setTimeout(function(){  
          $scope.$apply(function(){  
              $scope.name = "newName";  
              $scope.age="21"; });   
       },2000); }]);

會發現，頁面上的name和age在兩秒以後改變了，這就是$apply的做用。.net

其實，咱們用$timeout()函數也能實現，不用$apply()。其實$timeout()方法內部封裝好了$apply()方法，因此效果和上面的同樣，代碼以下：code

$timeout(function(){  
            $scope.name = "newName";  
            $scope.age++;  
        },2000);

2、$watch ()htm

$watch()方法監視Model 的變化。對象

$watch(watchExpression, listener, objectEquality);每一個參數的說明以下：
watchExpression：監聽的對象，它能夠是一個angular表達式如'name',或函數如function(){return $scope.name}。

listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(做用域的引用)
objectEquality：是否深度監聽，若是設置爲true,它告訴Angular檢查所監控的對象中每個屬性的變化. 若是你但願監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它。

2.一、監控變量

var myModule = angular.module("HelloAngular", []);  
myModule.controller("helloAngular", ['$scope',"$timeout",  
    function HelloAngular($scope,$timeout) {  
        $scope.age=20;  
        setInterval(function(){  
            $scope.$apply(function(){  
                $scope.age++;  
            })  
        },2000);  
  
        //監控某個變量  
        $scope.$watch('age',function(oldVal,newVal){  
            console.log('oldVal=' + oldVal);  
            console.log('newVal=' + newVal);  
        })  
    }  
]);

監控某個對象中的某個屬性，深度監聽。

var myModule = angular.module("HelloAngular", []);  
myModule.controller("helloAngular", ['$scope',"$timeout",  
    function HelloAngular($scope,$timeout) {  
        $scope.testData = {  
            money : 10,  
            num : 1,  
        };  
  
        setInterval(function(){  
            $scope.$apply(function(){  
                $scope.testData.num++;  
            })  
        },2000);  
          
      //監控對象的某個屬性  
    $scope.$watch('testData.num',function(value){  
            console.log(value);          
        },true);  
    }  
]);

監控某個函數

var myModule = angular.module("HelloAngular", []);  
myModule.controller("helloAngular", ['$scope',"$timeout",  
    function HelloAngular($scope,$timeout) {  
        $scope.testData = {  
            money : 10,  
            num : 1,  
        };  
  
        setInterval(function(){  
            $scope.$apply(function(){  
                $scope.testData.num++;  
            })  
        },2000);  
  
    $scope.sum = function(){  
            return $scope.testData.money * $scope.testData.num;  
        };  
  
        //監控某個函數  
        $scope.$watch($scope.sum,function(value){  
            console.log(value);          
        });  
    }

以上就是Angularjs中的$apply 與$watch 的使用，這些都是一些基礎用法，一個用於傳播model的變化，一個用於監控model的變化，$watch()在監控對象的屬性變化時，咱們可使用深度監聽，這樣以來能夠省去很多髒數據的監聽，從而提升效率。這兩兄弟在從此的編程中對我提供了很大的幫助，也對雙向數據綁定提供了很大的幫助。

轉自： http://blog.csdn.net/zhoukun1008/article/details/51746994

相關標籤/搜索

每日一句

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