《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