詳解JavaScript的AngularJS框架中的作用域與數據綁定

來源：易賢網閱讀：842 次日期：2016-08-02 15:30:03

溫馨提示：易賢網小編為您整理了“詳解JavaScript的AngularJS框架中的作用域與數據綁定”,方便廣大網友查閱！

AngularJS 簡介

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

AngularJS 作用域

基于 jQuery 的傳統 WEB 應用中，為了監聽用戶的輸入等行為，需要為每一個 DOM 元素設置一個監聽方法，也即是監聽 DOM 上發生的各類事件，然后由 jQuery 做出回應并展示在頁面上。這種方法簡便直觀，但是一旦 WEB 應用變得龐大而且復雜，那么監聽代碼就顯得非常的機械而且冗余，更可怕的是，如果對于 DOM 的事件監聽沒有做好管理，那么很容易出現瀏覽器資源的泄露。

針對以上所暴露的問題，AngularJS 用一系列指令來代替 jQuery 的事件綁定代碼。為了能夠組織好各類指令之間的協調工作而不出現數據混亂，AngularJS 在模型層上引申出作用域的概念，以配合控制器來實現對視圖層的展現工作。

作用域（Scope）

AngularJS 中，作用域是一個指向應用模型的對象，它是表達式的執行環境。作用域有層次結構，這個層次和相應的 DOM 幾乎是一樣的。作用域能監控表達式和傳遞事件。

在 HTML 代碼中，一旦一個 ng-app 指令被定義，那么一個作用域就產生了，由 ng-app 所生成的作用域比較特殊，它是一個根作用域（$rootScope），它是其他所有$Scope 的最頂層。

清單 1. 生成根作用域

<html>

</html>

除了用 ng-app 指令可以產生一個作用域之外，其他的指令如 ng-controller，ng-repeat 等都會產生一個或者多個作用域。此外，還可以通過 AngularJS 提供的創建作用域的工廠方法來創建一個作用域。這些作用域都擁有自己的繼承上下文，并且根作用域都為$rootScope。

在生成一個作用域之后，在編寫 AngularJS 代碼時，$scope 對象就代表了這個作用域的數據實體，我們可以在$scope 內定義各種數據類型，之后可以直接在 HTML 中以 {{變量名}} 方式來讓 HTML 訪問到這個變量，代碼如下：

清單 2. 簡單的數據綁定

angular.module('app', [])

.controller("ctrl", function ($scope) {

$scope.btns = {

ibm : 'ibm'

};

});

</script>

</head>

</div>

</body>

這就是 AngularJS 中最簡單的數據綁定方式，同時也是應用最為廣泛的數據綁定方式。

繼承作用域（Inherited Scope）

AngularJS 在創建一個作用域時，會檢索上下文，如果上下文中已經存在一個作用域，那么這個新創建的作用域就會以 JavaScript 原型繼承機制繼承其父作用域的屬性和方法（有個例外是孤立作用域，下文討論）。

一些 AngularJS 指令會創建新的子作用域，并且進行原型繼承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用 scope: true 和 transclude: true 創建的 directive。

以下 HTML 中定義了三個作用域，分別是由 ng-app 指令所創建的$rootScope，parentCtrl 和 childCtrl 所創建的子作用域，這其中 childCtrl 生成的作用域又是 parentCtrl 的子作用域。

清單 3. 作用域的繼承實例

</div>

</body>

繼承作用域符合 JavaScript 的原型繼承機制，這意味著如果我們在子作用域中訪問一個父作用域中定義的屬性，JavaScript 首先在子作用域中尋找該屬性，沒找到再從原型鏈上的父作用域中尋找，如果還沒找到會再往上一級原型鏈的父作用域尋找。在 AngularJS 中，作用域原型鏈的頂端是$rootScope，AnguarJS 將會尋找到$rootScope 為止，如果還是找不到，則會返回 undefined。

我們用實例代碼說明下這個機制。首先，我們探討下對于原型數據類型的作用域繼承機制：

清單 4. 作用域繼承實例-原始類型數據繼承

angular.module('app', [])

.controller('parentCtrl', ['$scope', function($scope) {

$scope.args = 'IBM DeveloperWorks';

}])

.controller('childCtrl', ['$scope', function($scope) {

}]);

</script>

</div>

</body>

運行頁面，我們得到以下的結果：

圖 1. 頁面運行結果。

這個結果我們非常好理解，雖然在 childCtrl 中沒有定義具體的 args 屬性，但是因為 childCtrl 的作用域繼承自 parentCtrl 的作用域，因此，AngularJS 會找到父作用域中的 args 屬性并設置到輸入框中。而且，如果我們在第一個輸入框中改變內容，內容將會同步的反應到第二個輸入框：

圖 2. 改變第一個輸入框的內容后頁面運行結果

假如我們修改第二個輸入框的內容，此時會發生什么事情呢？答案是第二個輸入框的內容從此將不再和第一個輸入框的內容保持同步。在改變第二個輸入框的內容時，因為 HTML 代碼中 model 明確綁定在 childCtrl 的作用域中，因此 AngularJS 會為 childCtrl 生成一個 args 原始類型屬性。這樣，根據 AngularJS 作用域繼承原型機制，childCtrl 在自己的作用域找得到 args 這個屬性，從而也不再會去尋找 parentCtrl 的 args 屬性。從此，兩個輸入框的內容所綁定的屬性已經是兩份不同的實例，因此不會再保持同步。

圖 3. 改變第二個輸入框的內容后頁面運行結果

假如我們將代碼做如下修改，結合以上兩個場景，思考下會出現怎樣的結果？

清單 5. 作用域繼承實例-對象數據繼承

angular.module('app', [])

.controller('parentCtrl', ['$scope', function($scope) {

$scope.args = {};

$scope.args.content = 'IBM DeveloperWorks';

}])

.controller('childCtrl', ['$scope', function($scope) {

}]);

</script>

</div>

</body>

答案是無論改變任何一個輸入框的內容，兩者的內容始終同步。

根據 AngularJS 的原型繼承機制，如果 ng-model 綁定的是一個對象數據，那么 AngularJS 將不會為 childCtrl 創建一個 args 的對象，自然也不會有 args.content 屬性。這樣，childCtrl 作用域中將始終不會存在 args.content 屬性，只能從父作用域中尋找，也即是兩個輸入框的的變化其實只是在改變 parentCtrl 作用域中的 args.content 屬性。因此，兩者的內容始終保持同步。

我們再看一個例子，這次請讀者自行分析結果。

清單 6. 作用域繼承實例-不再訪問父作用域的數據對象。

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>

</div>

</body>

答案是兩個輸入框的內容永遠不會同步。

孤立作用域（Isolate Scope）

孤立作用域是 AngularJS 中一個非常特殊的作用域，它只在 directive 中出現。在對 directive 的定義中，我們添加上一個 scope:{} 屬性，就為這個 directive 創建出了一個隔離作用域。

清單 7. directive 創建出一個孤立作用域

angular.module('isolate', []).directive("isolate", function () {

return {

scope : {},

};

})

孤立作用域最大的特點是不會原型繼承其父作用域，對外界的父作用域保持相對的獨立。因此，如果在定義了孤立作用域的 AngularJS directive 中想要訪問其父作用域的屬性，則得到的值為 undefined。代碼如下：

清單 8. 孤立作用域的隔離性

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>

</div>

</body>

上面的代碼中通過在 directive 中聲明了 scope 屬性從而創建了一個作用域，其父作用域為 ctrl 所屬的作用域。但是，這個作用域是孤立的，因此，它訪問不到父作用域的中的任何屬性。存在這樣設計機制的好處是：能夠創建出一些列可復用的 directive，這些 directive 不會相互在擁有的屬性值上產生串擾，也不會產生任何副作用。

AngularJS 孤立作用域的數據綁定

在繼承作用域中，我們可以選擇子作用域直接操作父作用域數據來實現父子作用域的通信，而在孤立作用域中，子作用域不能直接訪問和修改父作用域的屬性和值。為了能夠使孤立作用域也能和外界通信，AngularJS 提供了三種方式用來打破孤立作用域“孤立”這一限制。

單向綁定（@ 或者 @attr）

這是 AngularJS 孤立作用域與外界父作用域進行數據通信中最簡單的一種，綁定的對象只能是父作用域中的字符串值，并且為單向只讀引用，無法對父作用域中的字符串值進行修改，此外，這個字符串還必須在父作用域的 HTML 節點中以 attr（屬性）的方式聲明。

使用這種綁定方式時，需要在 directive 的 scope 屬性中明確指定引用父作用域中的 HTML 字符串屬性，否則會拋異常。示例代碼如下：

清單 9. 單向綁定示例

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>

</div>

</body>

簡單分析下上面的代碼，通過在 directive 中聲明了 scope:{isolates:'@'} 使得 directive 擁有了父作用域中 data-isolates 這個 HTML 屬性所擁有的值，這個值在控制器 ctrl 中被賦值為'IBM'。所以，代碼的運行結果是頁面上有兩個名為 IBM 的按鈕。

我們還注意到 link 函數中對 isolates 進行了修改，但是最終不會在運行結果中體現。這是因為 isolates 始終綁定為父作用域中的 btns 字符串，如果父作用域中的 btns 不改變，那么在孤立作用域中無論怎么修改 isolates 都不會起作用。

引用綁定（&或者&attr）

通過這種形式的綁定，孤立作用域將有能力訪問到父作用域中的函數對象，從而能夠執行父作用域中的函數來獲取某些結果。這種方式的綁定跟單向綁定一樣，只能以只讀的方式訪問父作用函數，并且這個函數的定義必須寫在父作用域 HTML 中的 attr（屬性）節點上。

這種方式的綁定雖然無法修改父作用域的 attr 所設定的函數對象，但是卻可以通過執行函數來改變父作用域中某些屬性的值，來達到一些預期的效果。示例代碼如下：

清單 10. 引用綁定示例

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>

</div>

</body>

這個例子中，瀏覽器的控制臺將會輸出一段“IBM DeveloperWorks”文字。

上面的代碼中我們在父作用域中指定了一個函數對象$scope.func，在孤立作用域中通過對 HTML 屬性的綁定從而引用了 func。需要注意的是 link 函數中對 func 對象的使用方法，$scope.isolates 獲得的僅僅是函數對象，而不是調用這個對象，因此我們需要在調用完$scope.isolates 之后再調用這個函數，才能得到真正的執行結果。

雙向綁定（=或者=attr）

雙向綁定賦予 AngularJS 孤立作用域與外界最為自由的雙向數據通信功能。在雙向綁定模式下，孤立作用域能夠直接讀寫父作用域中的屬性和數據。和以上兩種孤立作用域定義數據綁定一樣，雙向綁定也必須在父作用域的 HTML 中設定屬性節點來綁定。

雙向綁定非常適用于一些子 directive 需要頻繁和父作用域進行數據交互，并且數據比較復雜的場景。不過，由于可以自由的讀寫父作用域中的屬性和對象，所以在一些多個 directive 共享父作用域數據的場景下需要小心使用，很容易引起數據上的混亂。

示例代碼如下：

清單 11. 雙向綁定示例

angular.module('isolateScope', [])

.directive("isolateDirective", function () {

return {

replace : true,

template: '<button>{{isolates}}</button>',

scope : {

isolates : '=',