（12）AngularJS 1.X 之$watch和$apply方法

2024-04-27 15:18:51

字体：大中小

来源：转载

供稿：网友

引言watch和apply方法1 watch对象的创建1 apply方法实现双向绑定

1.引言

在本篇博客中主要介绍一下AngularJS中的数据双向绑定，我们是否有过这个疑问：为什么我们使用ng-model命令可以实现双向绑定呢？在以前的博客中我们说过有一个$watch队列的概念，只要在页面绑定一个变量就会生成一个$watch对象，然后将该对象放入到$watch队列中，然后我们使用ng-model命令时，AngularJS会自动调用$apply方法，该方法会启动$digest循环，然后该循环会遍历$watch队列，从而更新UI，形成双向绑定的效果。

关于上面的过程有两个而难题：

问题一：$watch对象是自动创建的问题二：$apply方法是自动调用的

接下来我们就来看看入门手动调用这两个东西。

2.`$watch`和`$apply`方法

2.1 `$watch`对象的创建

首先我们看一下下面的代码：app.controller('MainCtrl', function($scope) { $scope.foo = "Foo"; $scope.world = "World";});Hello, {{ world}}

上面的代码会自动生成一个$watch对象，也就是说，只有world变量生成了$watch对象，但是foo没有生成$watch对象,从上面的例子将变量绑定在UI上面，会自动生成$watch对象，没有绑定的foo变量将不会生成，这个过程都是自动的。

接下来我们使用$watch方法手动检测foo的改变。代码如下：（注意：我们检测'foo'字符串变量）

<html ng-app="myApp"><head> <script src="js/angular.js"></script> <meta charset="utf-8"> <script> var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope) { $scope.foo = "Foo"; $scope.world = "World"; $scope.change= function () { $scope.foo="new Foo"; } //注意这里：变量为："foo" $scope.$watch('foo',function (newValue,oldValue) { //其中：newValue是新值 //oldValue为旧值 //通过 $scope.$watch方法会给foo变量创建相应的$watch对象，然后可以检测改变量的改变 console.log(newValue); console.log(oldValue); }) }); </script></head><body> <div ng-controller="MainCtrl"> <button ng-click="change();">改变Foo变量的值</button> </div></body></html>运行结果

这里写图片描述

2.1 `$apply`方法实现双向绑定

我们看下面的这个例子：

控制器代码 var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope) { $scope.num = 0; setInterval(function () { $scope.num++ },1000); });html模板 <div ng-controller="MainCtrl"> {{num}} </div>代码是没有问题的，每隔一秒中num变量就会加1，但是这并没有实时更新到UI上面，这是因为，虽然num的值修改了，但是并没有启动$digest循环，所以没有实时更新，如何启动$digest循环？答案是$apply方法，接下来我们就是用$apply方法实现数据的实时更新。 var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope,$interval) { $scope.num = 0; setInterval(function () { //这里会启动$digest循环，实时更新 $scope.$apply(function () { $scope.num++ }) },1000); });

上一篇：jquery中attr和prop的区别

下一篇：Mybatis(五) resultType 多表查询 (包装类)