《AngularJS》----$apply 与 $watch
在AngularJS的一些项目中,我们经常用到$apply 与 $watch ,这两个对象,这另个对象都依赖于$scope对象,其中,$apply应用与传播modle的变化,而$watch是用来监测model的变化,这与AngularJS中的双向数据绑定有很大的关系,下面我们探讨一下这两个对象的基本用法。 一、$apply() 1.1、$apply 方法作用:Scope提供$apply方法传播Model的变化 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",$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);每个参数的说明如下: listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值),oldValue(旧值),scope(作用域的引用) 2.1、监控变量
var myModule = angular.module("HelloAngular",$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",$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",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 – 如何延迟视图渲染,直到从外部源加载
- WebService 基本介绍
- scala – 用于无形Hlist的Generic Poly2文件夹案
- vim – 如何禁用YouCompleteMe并启用NeoComplete
- 基于Metronic的Bootstrap开发框架经验总结(3)-
- WiMAX Bootstrap Security 中用到的 AES-CCM 算法
- bash – 从文件中选择随机行
- 从零开始构建 Wijmo & Angular 2 小应用
- tomcat7无法在Ubuntu Docker容器内启动
- AngularJS分页与$location.path但没有ngView重新