您的位置：首页 > 移动开发

《AngularJS》----$apply 与 $watch

2016-06-27 08:49 375 查看

在AngularJS的一些项目中，我们经常用到$apply 与 $watch ，这两个对象，这另个对象都依赖于$scope对象，其中，$apply应用与传播modle的变化，而$watch是用来监测model的变化，这与AngularJS中的双向数据绑定有很大的关系，下面我们探讨一下这两个对象的基本用法。

一、$apply()

1.1、$apply 方法作用：Scope提供$apply方法传播Model的变化

1.2、$apply方法使用情景：AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等），$apply 就是用来做这件事情的。

1.3、$apply方法注意事项：只要可以，请把要执行的代码和函数传递给$apply去执行，而不要自已执行那些函数然后再调用$apply。

举例：

HTML代码

<!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的变化，如果我们这样写

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的作用。
其实，我们用$timeout()函数也能实现，不用$apply()。其实$timeout()方法内部封装好了$apply()方法，所以效果和上面的一样，代码如下：

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

二、$watch ()

$watch()方法监视Model 的变化。

$watch(watchExpression, listener, objectEquality);每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

2.1、监控变量

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()在监控对象的属性变化时，我们可以使用深度监听，这样以来可以省去不少脏数据的监听，从而提高效率。这两兄弟在今后的编程中对我提供了很大的帮助，也对双向数据绑定提供了很大的帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS Web

相关文章推荐

新的分享

章节导航