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

2024-04-27 15:18:51

字體：大中小

供稿：網(wǎng)友

引言watch和apply方法1 watch對象的創(chuàng)建1 apply方法實(shí)現(xiàn)雙向綁定

1.引言

在本篇博客中主要介紹一下AngularJS中的數(shù)據(jù)雙向綁定，我們是否有過這個(gè)疑問：為什么我們使用ng-model命令可以實(shí)現(xiàn)雙向綁定呢？在以前的博客中我們說過有一個(gè)$watch隊(duì)列的概念，只要在頁面綁定一個(gè)變量就會(huì)生成一個(gè)$watch對象，然后將該對象放入到$watch隊(duì)列中，然后我們使用ng-model命令時(shí)，AngularJS會(huì)自動(dòng)調(diào)用$apply方法，該方法會(huì)啟動(dòng)$digest循環(huán)，然后該循環(huán)會(huì)遍歷$watch隊(duì)列，從而更新UI，形成雙向綁定的效果。

關(guān)于上面的過程有兩個(gè)而難題：

問題一：$watch對象是自動(dòng)創(chuàng)建的問題二：$apply方法是自動(dòng)調(diào)用的

接下來我們就來看看入門手動(dòng)調(diào)用這兩個(gè)東西。

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

2.1 `$watch`對象的創(chuàng)建

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

上面的代碼會(huì)自動(dòng)生成一個(gè)$watch對象，也就是說，只有world變量生成了$watch對象，但是foo沒有生成$watch對象,從上面的例子將變量綁定在UI上面，會(huì)自動(dòng)生成$watch對象，沒有綁定的foo變量將不會(huì)生成，這個(gè)過程都是自動(dòng)的。

接下來我們使用$watch方法手動(dòng)檢測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方法會(huì)給foo變量創(chuàng)建相應(yīng)的$watch對象，然后可以檢測改變量的改變 console.log(newValue); console.log(oldValue); }) }); </script></head><body> <div ng-controller="MainCtrl"> <button ng-click="change();">改變Foo變量的值</button> </div></body></html>運(yùn)行結(jié)果

這里寫圖片描述

2.1 `$apply`方法實(shí)現(xiàn)雙向綁定

我們看下面的這個(gè)例子：

控制器代碼 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變量就會(huì)加1，但是這并沒有實(shí)時(shí)更新到UI上面，這是因?yàn)椋m然num的值修改了，但是并沒有啟動(dòng)$digest循環(huán)，所以沒有實(shí)時(shí)更新，如何啟動(dòng)$digest循環(huán)？答案是$apply方法，接下來我們就是用$apply方法實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新。 var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope,$interval) { $scope.num = 0; setInterval(function () { //這里會(huì)啟動(dòng)$digest循環(huán)，實(shí)時(shí)更新 $scope.$apply(function () { $scope.num++ }) },1000); });

上一篇：jquery中attr和prop的區(qū)別

下一篇：Mybatis(五) resultType 多表查詢 (包裝類)