（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 多表查詢 (包裝類)