詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定

更新時(shí)間：2016年03月04日 14:28:45 作者：朱盛浩

這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識(shí)點(diǎn),需要的朋友可以參考下

AngularJS 簡(jiǎn)介
AngularJS 是由 Google 發(fā)起的一款開源的前端 MVC 腳本框架，既適合做普通 WEB 應(yīng)用也可以做 SPA（單頁(yè)面應(yīng)用，所有的用戶操作都在一個(gè)頁(yè)面中完成）。與同為 MVC 框架的 Dojo 的定位不同，AngularJS 在功能上更加輕量，而相比于 jQuery，AngularJS 又幫您省去了許多機(jī)械的綁定工作。在一些對(duì)開發(fā)速度要求高，功能模塊不需要太豐富的非企業(yè)級(jí) WEB 應(yīng)用上，AngularJS 是一個(gè)非常好的選擇。AngularJS 最為復(fù)雜同時(shí)也是最強(qiáng)大的部分就是它的數(shù)據(jù)綁定機(jī)制，這個(gè)機(jī)制幫助我們能更好的將注意力集中在數(shù)據(jù)的模型建立和傳遞上，而不是對(duì)底層的 DOM 進(jìn)行低級(jí)的操作。

AngularJS 作用域
基于 jQuery 的傳統(tǒng) WEB 應(yīng)用中，為了監(jiān)聽用戶的輸入等行為，需要為每一個(gè) DOM 元素設(shè)置一個(gè)監(jiān)聽方法，也即是監(jiān)聽 DOM 上發(fā)生的各類事件，然后由 jQuery 做出回應(yīng)并展示在頁(yè)面上。這種方法簡(jiǎn)便直觀，但是一旦 WEB 應(yīng)用變得龐大而且復(fù)雜，那么監(jiān)聽代碼就顯得非常的機(jī)械而且冗余，更可怕的是，如果對(duì)于 DOM 的事件監(jiān)聽沒有做好管理，那么很容易出現(xiàn)瀏覽器資源的泄露。
針對(duì)以上所暴露的問題，AngularJS 用一系列指令來(lái)代替 jQuery 的事件綁定代碼。為了能夠組織好各類指令之間的協(xié)調(diào)工作而不出現(xiàn)數(shù)據(jù)混亂，AngularJS 在模型層上引申出作用域的概念，以配合控制器來(lái)實(shí)現(xiàn)對(duì)視圖層的展現(xiàn)工作。
作用域（Scope）
AngularJS 中，作用域是一個(gè)指向應(yīng)用模型的對(duì)象，它是表達(dá)式的執(zhí)行環(huán)境。作用域有層次結(jié)構(gòu)，這個(gè)層次和相應(yīng)的 DOM 幾乎是一樣的。作用域能監(jiān)控表達(dá)式和傳遞事件。
在 HTML 代碼中，一旦一個(gè) ng-app 指令被定義，那么一個(gè)作用域就產(chǎn)生了，由 ng-app 所生成的作用域比較特殊，它是一個(gè)根作用域（$rootScope），它是其他所有$Scope 的最頂層。
清單 1. 生成根作用域

<html>
 <head><script src="angular.min.js"></script></head>
 <body data-ng-app="app">...</body>
</html>

除了用 ng-app 指令可以產(chǎn)生一個(gè)作用域之外，其他的指令如 ng-controller，ng-repeat 等都會(huì)產(chǎn)生一個(gè)或者多個(gè)作用域。此外，還可以通過 AngularJS 提供的創(chuàng)建作用域的工廠方法來(lái)創(chuàng)建一個(gè)作用域。這些作用域都擁有自己的繼承上下文，并且根作用域都為$rootScope。
在生成一個(gè)作用域之后，在編寫 AngularJS 代碼時(shí)，$scope 對(duì)象就代表了這個(gè)作用域的數(shù)據(jù)實(shí)體，我們可以在$scope 內(nèi)定義各種數(shù)據(jù)類型，之后可以直接在 HTML 中以 {{變量名}} 方式來(lái)讓 HTML 訪問到這個(gè)變量，代碼如下：
清單 2. 簡(jiǎn)單的數(shù)據(jù)綁定

<script>
angular.module('app', [])
 .controller("ctrl", function ($scope) {
 $scope.btns = {
 ibm : 'ibm'
 };
 });
</script>
</head>
<body data-ng-app="app" >
 <div data-ng-controller="ctrl">
 <button>{{btns.ibm}}</button>
 </div>
</body>

這就是 AngularJS 中最簡(jiǎn)單的數(shù)據(jù)綁定方式，同時(shí)也是應(yīng)用最為廣泛的數(shù)據(jù)綁定方式。
繼承作用域（Inherited Scope）
AngularJS 在創(chuàng)建一個(gè)作用域時(shí)，會(huì)檢索上下文，如果上下文中已經(jīng)存在一個(gè)作用域，那么這個(gè)新創(chuàng)建的作用域就會(huì)以 JavaScript 原型繼承機(jī)制繼承其父作用域的屬性和方法（有個(gè)例外是孤立作用域，下文討論）。
一些 AngularJS 指令會(huì)創(chuàng)建新的子作用域，并且進(jìn)行原型繼承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用 scope: true 和 transclude: true 創(chuàng)建的 directive。
以下 HTML 中定義了三個(gè)作用域，分別是由 ng-app 指令所創(chuàng)建的$rootScope，parentCtrl 和 childCtrl 所創(chuàng)建的子作用域，這其中 childCtrl 生成的作用域又是 parentCtrl 的子作用域。
清單 3. 作用域的繼承實(shí)例

<body data-ng-app="app">
 <div data-ng-controller="parentCtrl">
<input data-ng-model="args">
<div data-ng-controller="childCtrl">
 <input data-ng-model="args">
</div>
 </div>
</body>

繼承作用域符合 JavaScript 的原型繼承機(jī)制，這意味著如果我們?cè)谧幼饔糜蛑性L問一個(gè)父作用域中定義的屬性，JavaScript 首先在子作用域中尋找該屬性，沒找到再?gòu)脑玩溕系母缸饔糜蛑袑ふ遥绻€沒找到會(huì)再往上一級(jí)原型鏈的父作用域?qū)ふ?。?AngularJS 中，作用域原型鏈的頂端是$rootScope，AnguarJS 將會(huì)尋找到$rootScope 為止，如果還是找不到，則會(huì)返回 undefined。
我們用實(shí)例代碼說(shuō)明下這個(gè)機(jī)制。首先，我們探討下對(duì)于原型數(shù)據(jù)類型的作用域繼承機(jī)制：
清單 4. 作用域繼承實(shí)例-原始類型數(shù)據(jù)繼承

<script type="text/javascript">
 angular.module('app', [])
 .controller('parentCtrl', ['$scope', function($scope) {
 $scope.args = 'IBM DeveloperWorks';
 }])
 .controller('childCtrl', ['$scope', function($scope) { 
 }]);
</script>
<body data-ng-app="app">
 <div data-ng-controller="parentCtrl">
 <input data-ng-model="args">
<div data-ng-controller="childCtrl">
 <input data-ng-model="args">
</div>
 </div>
</body>

運(yùn)行頁(yè)面，我們得到以下的結(jié)果：
圖 1. 頁(yè)面運(yùn)行結(jié)果。

201634142417114.jpg (188×56)

這個(gè)結(jié)果我們非常好理解，雖然在 childCtrl 中沒有定義具體的 args 屬性，但是因?yàn)?childCtrl 的作用域繼承自 parentCtrl 的作用域，因此，AngularJS 會(huì)找到父作用域中的 args 屬性并設(shè)置到輸入框中。而且，如果我們?cè)诘谝粋€(gè)輸入框中改變內(nèi)容，內(nèi)容將會(huì)同步的反應(yīng)到第二個(gè)輸入框：
圖 2. 改變第一個(gè)輸入框的內(nèi)容后頁(yè)面運(yùn)行結(jié)果

201634142440035.jpg (192×50)

假如我們修改第二個(gè)輸入框的內(nèi)容，此時(shí)會(huì)發(fā)生什么事情呢？答案是第二個(gè)輸入框的內(nèi)容從此將不再和第一個(gè)輸入框的內(nèi)容保持同步。在改變第二個(gè)輸入框的內(nèi)容時(shí)，因?yàn)?HTML 代碼中 model 明確綁定在 childCtrl 的作用域中，因此 AngularJS 會(huì)為 childCtrl 生成一個(gè) args 原始類型屬性。這樣，根據(jù) AngularJS 作用域繼承原型機(jī)制，childCtrl 在自己的作用域找得到 args 這個(gè)屬性，從而也不再會(huì)去尋找 parentCtrl 的 args 屬性。從此，兩個(gè)輸入框的內(nèi)容所綁定的屬性已經(jīng)是兩份不同的實(shí)例，因此不會(huì)再保持同步。
圖 3. 改變第二個(gè)輸入框的內(nèi)容后頁(yè)面運(yùn)行結(jié)果

201634142457484.jpg (179×48)

假如我們將代碼做如下修改，結(jié)合以上兩個(gè)場(chǎng)景，思考下會(huì)出現(xiàn)怎樣的結(jié)果？
清單 5. 作用域繼承實(shí)例-對(duì)象數(shù)據(jù)繼承

<script type="text/javascript">
angular.module('app', [])
 .controller('parentCtrl', ['$scope', function($scope) {
 $scope.args = {};
 $scope.args.content = 'IBM DeveloperWorks';
}])
.controller('childCtrl', ['$scope', function($scope) { 
}]);
</script>
<body data-ng-app="app">
 <div data-ng-controller="parentCtrl">
 <input data-ng-model="args.content">
 <div data-ng-controller="childCtrl">
 <input data-ng-model="args.content">
 </div>
 </div>
</body>

答案是無(wú)論改變?nèi)魏我粋€(gè)輸入框的內(nèi)容，兩者的內(nèi)容始終同步。
根據(jù) AngularJS 的原型繼承機(jī)制，如果 ng-model 綁定的是一個(gè)對(duì)象數(shù)據(jù)，那么 AngularJS 將不會(huì)為 childCtrl 創(chuàng)建一個(gè) args 的對(duì)象，自然也不會(huì)有 args.content 屬性。這樣，childCtrl 作用域中將始終不會(huì)存在 args.content 屬性，只能從父作用域中尋找，也即是兩個(gè)輸入框的的變化其實(shí)只是在改變 parentCtrl 作用域中的 args.content 屬性。因此，兩者的內(nèi)容始終保持同步。
我們?cè)倏匆粋€(gè)例子，這次請(qǐng)讀者自行分析結(jié)果。
清單 6. 作用域繼承實(shí)例-不再訪問父作用域的數(shù)據(jù)對(duì)象。

<script type="text/javascript">
 angular.module('app', [])
 .controller('parentCtrl', ['$scope', function($scope) {
 $scope.args = {};
 $scope.args.content = 'IBM DeveloperWorks';
}])
.controller('childCtrl', ['$scope', function($scope) {
 $scope.args = {}; 
 $scope.args.content = 'IBM DeveloperWorks';
}]);
</script>
<body data-ng-app="app">
 <div data-ng-controller="parentCtrl">
 <input data-ng-model="args.content">
 <div data-ng-controller="childCtrl">
 <input data-ng-model="args.content">
 </div>
 </div>
</body>

答案是兩個(gè)輸入框的內(nèi)容永遠(yuǎn)不會(huì)同步。
孤立作用域（Isolate Scope）
孤立作用域是 AngularJS 中一個(gè)非常特殊的作用域，它只在 directive 中出現(xiàn)。在對(duì) directive 的定義中，我們添加上一個(gè) scope:{} 屬性，就為這個(gè) directive 創(chuàng)建出了一個(gè)隔離作用域。
清單 7. directive 創(chuàng)建出一個(gè)孤立作用域

angular.module('isolate', []).directive("isolate", function () {
 return {
 scope : {},
 };
})

孤立作用域最大的特點(diǎn)是不會(huì)原型繼承其父作用域，對(duì)外界的父作用域保持相對(duì)的獨(dú)立。因此，如果在定義了孤立作用域的 AngularJS directive 中想要訪問其父作用域的屬性，則得到的值為 undefined。代碼如下：
清單 8. 孤立作用域的隔離性

<script type="text/javascript">
 angular.module('app', [])
 .controller('ctrl', ['$scope', function($scope) {
 $scope.args = {};
 }])
 .directive("isolateDirective", function () {
 return {
 scope : {},
 link : function($scope, $element, $attr) {
 console.log($scope.$args); //輸出 undefined
 }
 };
});
</script>
<body data-ng-app="app">
 <div data-ng-controller="ctrl">
 <div data-isolate-directive></div>
 </div>
</body>

上面的代碼中通過在 directive 中聲明了 scope 屬性從而創(chuàng)建了一個(gè)作用域，其父作用域?yàn)?ctrl 所屬的作用域。但是，這個(gè)作用域是孤立的，因此，它訪問不到父作用域的中的任何屬性。存在這樣設(shè)計(jì)機(jī)制的好處是：能夠創(chuàng)建出一些列可復(fù)用的 directive，這些 directive 不會(huì)相互在擁有的屬性值上產(chǎn)生串?dāng)_，也不會(huì)產(chǎn)生任何副作用。
AngularJS 孤立作用域的數(shù)據(jù)綁定
在繼承作用域中，我們可以選擇子作用域直接操作父作用域數(shù)據(jù)來(lái)實(shí)現(xiàn)父子作用域的通信，而在孤立作用域中，子作用域不能直接訪問和修改父作用域的屬性和值。為了能夠使孤立作用域也能和外界通信，AngularJS 提供了三種方式用來(lái)打破孤立作用域“孤立”這一限制。
單向綁定（@ 或者 @attr）
這是 AngularJS 孤立作用域與外界父作用域進(jìn)行數(shù)據(jù)通信中最簡(jiǎn)單的一種，綁定的對(duì)象只能是父作用域中的字符串值，并且為單向只讀引用，無(wú)法對(duì)父作用域中的字符串值進(jìn)行修改，此外，這個(gè)字符串還必須在父作用域的 HTML 節(jié)點(diǎn)中以 attr（屬性）的方式聲明。
使用這種綁定方式時(shí)，需要在 directive 的 scope 屬性中明確指定引用父作用域中的 HTML 字符串屬性，否則會(huì)拋異常。示例代碼如下：
清單 9. 單向綁定示例

<script>
 angular.module('isolateScope', [])
 .directive("isolateDirective", function () {
 return {
 replace : true,
 template: '<button>{{isolates}}</button>',
 scope : {
 isolates : '@',
 },
 link : function($scope, $element, $attr) {
 $scope.isolates = "DeveloperWorks";
 }
 };
 })
 .controller("ctrl", function ($scope) {
 $scope.btns = 'IBM';
 });
</script>
<body data-ng-app="isolateScope" >
<div data-ng-controller="ctrl">
 <button>{{btns}}</button>
 <div data-isolate-directive data-isolates="{{btns}}"></div>
 </div>
</body>

簡(jiǎn)單分析下上面的代碼，通過在 directive 中聲明了 scope:{isolates:'@'} 使得 directive 擁有了父作用域中 data-isolates 這個(gè) HTML 屬性所擁有的值，這個(gè)值在控制器 ctrl 中被賦值為'IBM'。所以，代碼的運(yùn)行結(jié)果是頁(yè)面上有兩個(gè)名為 IBM 的按鈕。
我們還注意到 link 函數(shù)中對(duì) isolates 進(jìn)行了修改，但是最終不會(huì)在運(yùn)行結(jié)果中體現(xiàn)。這是因?yàn)?isolates 始終綁定為父作用域中的 btns 字符串，如果父作用域中的 btns 不改變，那么在孤立作用域中無(wú)論怎么修改 isolates 都不會(huì)起作用。
引用綁定（&或者&attr）
通過這種形式的綁定，孤立作用域?qū)⒂心芰υL問到父作用域中的函數(shù)對(duì)象，從而能夠執(zhí)行父作用域中的函數(shù)來(lái)獲取某些結(jié)果。這種方式的綁定跟單向綁定一樣，只能以只讀的方式訪問父作用函數(shù)，并且這個(gè)函數(shù)的定義必須寫在父作用域 HTML 中的 attr（屬性）節(jié)點(diǎn)上。
這種方式的綁定雖然無(wú)法修改父作用域的 attr 所設(shè)定的函數(shù)對(duì)象，但是卻可以通過執(zhí)行函數(shù)來(lái)改變父作用域中某些屬性的值，來(lái)達(dá)到一些預(yù)期的效果。示例代碼如下：
清單 10. 引用綁定示例

<script>
 angular.module('isolateScope', [])
 .directive("isolateDirective", function () {
 return {
 replace : true,
 scope : {
 isolates : '&',
 },
 link : function($scope, $element, $attr) {
 var func = $scope.isolates();
 func();
 }
 };
 })
 .controller("ctrl", function ($scope) {
 $scope.func = function () {
 console.log("IBM DeveloperWorks");
 }
 });
</script>
<body data-ng-app="isolateScope" >
 <div data-ng-controller="ctrl"> 
 <div data-isolate-directive data-isolates="func"></div>
 </div> 
</body>

這個(gè)例子中，瀏覽器的控制臺(tái)將會(huì)輸出一段“IBM DeveloperWorks”文字。
上面的代碼中我們?cè)诟缸饔糜蛑兄付艘粋€(gè)函數(shù)對(duì)象$scope.func，在孤立作用域中通過對(duì) HTML 屬性的綁定從而引用了 func。需要注意的是 link 函數(shù)中對(duì) func 對(duì)象的使用方法，$scope.isolates 獲得的僅僅是函數(shù)對(duì)象，而不是調(diào)用這個(gè)對(duì)象，因此我們需要在調(diào)用完$scope.isolates 之后再調(diào)用這個(gè)函數(shù)，才能得到真正的執(zhí)行結(jié)果。
雙向綁定（=或者=attr）
雙向綁定賦予 AngularJS 孤立作用域與外界最為自由的雙向數(shù)據(jù)通信功能。在雙向綁定模式下，孤立作用域能夠直接讀寫父作用域中的屬性和數(shù)據(jù)。和以上兩種孤立作用域定義數(shù)據(jù)綁定一樣，雙向綁定也必須在父作用域的 HTML 中設(shè)定屬性節(jié)點(diǎn)來(lái)綁定。
雙向綁定非常適用于一些子 directive 需要頻繁和父作用域進(jìn)行數(shù)據(jù)交互，并且數(shù)據(jù)比較復(fù)雜的場(chǎng)景。不過，由于可以自由的讀寫父作用域中的屬性和對(duì)象，所以在一些多個(gè) directive 共享父作用域數(shù)據(jù)的場(chǎng)景下需要小心使用，很容易引起數(shù)據(jù)上的混亂。
示例代碼如下：
清單 11. 雙向綁定示例

<script>
 angular.module('isolateScope', [])
 .directive("isolateDirective", function () {
 return {
 replace : true,
 template: '<button>{{isolates}}</button>',
 scope : {
 isolates : '=',
 },
 link : function($scope, $element, $attr) {
 $scope.isolates.ibm = "IBM";
 }
 };
 })
 .controller("ctrl", function ($scope) {
 $scope.btns = {
 ibm : 'ibm',
 dw : 'DeveloperWorks'
 }; 
 });
</script>
<body data-ng-app="isolateScope" >
 <div data-ng-controller="ctrl">
 <button>{{btns.dw}}</button>
 <button>{{btns.ibm}}</button>
 <div data-isolate-directive data-isolates="btns"></div>
 </div>
</body>

上面的代碼運(yùn)行的結(jié)果是瀏覽器頁(yè)面上出現(xiàn)三個(gè)按鈕，其中第一個(gè)按鈕標(biāo)題為“DeveloperWorks”，第二和第三個(gè)按鈕的標(biāo)題為“IBM”。
初始時(shí)父作用域中的$scope.btns.ibm 為小寫的“ibm”，通過雙向綁定，孤立作用域中將父作用域的 ibm 改寫成為大寫的“IBM”并且直接生效，父作用域的值被更改。

總結(jié)
由于 AngularJS 框架的輕量性和其清晰的 MVC 特點(diǎn)使得其在推出之后就大受歡迎，實(shí)踐中也很容易上手。AngularJS 比較難以掌握和理解的就是其作用域和綁定機(jī)制，本文重點(diǎn)將作用域和綁定機(jī)制做了分析與討論，希望讀者能夠理解并熟練掌握這塊內(nèi)容。

您可能感興趣的文章: