AngularJS控制器之間的數(shù)據(jù)共享及通信詳解
AngularJS 本身已經(jīng)提供了像指令 Directive 和 服務(wù) Service 一類的方式，來(lái)實(shí)現(xiàn)數(shù)據(jù)和代碼的共享和復(fù)用，但在實(shí)際的項(xiàng)目開發(fā)中，或許是處于懶惰，亦或是為了便利，總會(huì)想在兩個(gè)控制器之間，直接進(jìn)行數(shù)據(jù)的共享通信，或者是函數(shù)與方法的調(diào)用，這里我們就看看有哪些方法可以滿足這個(gè)要求。
單例服務(wù)
單例服務(wù)是 AngularJS 本身支持的數(shù)據(jù)和代碼共享方式，因?yàn)槭菃卫?，所有的控制器訪問的便是同一份數(shù)據(jù)。比如，下面的 Service 便可以實(shí)現(xiàn)：
angular
.module('app')
.service('ObjectService', [ObjectService]);
function ObjectService() {
var list = {};
return {
get: function(id){
return list[id];
},
set: function(id, v){
list[id] = v;
}
};
}
在一個(gè)控制器中，調(diào)用 ObjectService.set('i', 1) 設(shè)置的數(shù)據(jù)，在其它控制器中，便可以通過 ObjectService.get('i') 來(lái)獲取。
廣播與事件
AngularJS 中在觸發(fā)事件和發(fā)送廣播時(shí)，都可以傳遞參數(shù)，可以通過這一特性，來(lái)實(shí)現(xiàn)數(shù)據(jù)的共享。與事件和廣播相關(guān)的，共有三個(gè)方法，分別是：
1.$emit()：觸發(fā)事件，它可以向上傳遞數(shù)據(jù)，比如，子控制器向父控制器，還有控制器向 $rootScope
2.$broadcast()：發(fā)送廣播，它可以向下傳遞數(shù)據(jù)，比如，父控制器向子控制器傳遞數(shù)據(jù)，或者 $rootScope 向任意控制器傳遞數(shù)據(jù)
3.$on()：監(jiān)聽事件與廣播，可以捕獲 $emit 和 $broadcast
可以將控制器之間的通信，分為三種情形：
1.無(wú)直接關(guān)聯(lián)的控制器：使用 $rootScope.$emit()、$rootScope.$boardcast() 或 $scope.$emit 來(lái)發(fā)出數(shù)據(jù)，通過 $rootScope.$on() 來(lái)獲取數(shù)據(jù)
2.父控制器到子控制器：父控制器使用 $scope.$boradcast() 來(lái)發(fā)送數(shù)據(jù)，子控制器通過 $scope.$on() 來(lái)獲取數(shù)據(jù)
3.子控制器至父控制器：子控制器使用 $scope.$emit() 來(lái)發(fā)送數(shù)據(jù)，父控制器通過 $scope.$on() 來(lái)獲取數(shù)據(jù)
下面是簡(jiǎn)單的用法：
// one controller
angular
.module('app')
.controller('OneController', ['$scope', OneController]);
function OneController($scope){
var data = {value: 'test'};
$rootScope.$broadcast('open.notice.editor', data);
}
// other controller
angular
.module('app')
.controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
$scope.$on('open.notice.editor', function(event, data){
$scope.open(data);
$scope.$emit('notice.editor.opened');
});
}
父控制器
如果兩個(gè)控制器共同擁有同一個(gè)父控制器，則可以通過父控制器來(lái)進(jìn)行數(shù)據(jù)共享和通信。比如：
<div ng-controller="ParentController"> <div ng-controller="ChildOneController"></div> <div ng-controller="ChildTwoController"></div> </div>
// 父控制器
angular
.module('app')
.controller('ParentController', ['$scope', ParentController]);
function ParentController($scope){
// 用于傳遞數(shù)據(jù)的變量
$scope.data = null;
}
// 子控制器
angular
.module('app')
.controller('ChildOneController', ['$scope', ChildOneController]);
function ChildOneController($scope){
// 數(shù)據(jù)設(shè)置
$scope.$parent.data = 1;
}
// 子控制器
angular
.module('app')
.controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);
function ChildTwoController($scope, $timeout){
$timeout(function(){
// 數(shù)據(jù)讀取
console.log($scope.$parent.data);
}, 1000);
}
全局或共用的變量
AngularJS 提供了對(duì) window 和 localStorage 兩個(gè)變量的封裝，$window 和 $localStorage ，通過修改和監(jiān)聽這兩個(gè)值，可以達(dá)到在控制器之間數(shù)據(jù)共享和通信的目的。方法如下：
// one controller
angular
.module('app')
.controller('OneController', ['$scope', '$window', OneController]);
function OneController($scope, $window){
// 數(shù)據(jù)設(shè)置
$window.data = 1;
}
// other controller
angular
.module('app')
.controller('AnotherController', ['$scope', AnotherController]);
function AnotherController($scope){
// 監(jiān)聽修改
$scope.$watch(function(){
return $window.data;
}, function(n){
$scope.windowData = n;
});
}
其實(shí)，這種監(jiān)聽修改的方式，也可以用在其它通信方式中。
元素綁定
AngularJS 中，可以通過一個(gè)元素，來(lái)獲取其上的控制器實(shí)例。通過這種方式便可以快速的獲取
修改某個(gè)控制器中的數(shù)據(jù)，或者調(diào)用這個(gè)控制器中的方法。比如：
<div ng-controller="AppController"> <div id="div-a"></div> </div>
可以通過以下的方法，來(lái)獲取控制器實(shí)例：
var instance = angular.element(document.getElementById('div-a')).scope();
接著，便可以通過這個(gè) instance 來(lái)調(diào)用控制器的方法，獲取和修改值了。無(wú)法是元素本身綁定有控制器，還是元素的父級(jí)元素綁定有控制器，都可以成功的獲取。
本文關(guān)于Angular控制器之間的數(shù)據(jù)共享與通信就介紹到這了，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友可以一起學(xué)習(xí)，謝謝大家支持腳本之家。
相關(guān)文章
在html規(guī)范里面,它定義了非常多的標(biāo)簽,在這些標(biāo)簽里面,相同標(biāo)簽之間的嵌套,不同標(biāo)簽之間的嵌套,是十分常見,在Angular里面,我們可以通過自定義標(biāo)簽的方式引用組件,這里的標(biāo)簽?zāi)芊裣裨膆tml標(biāo)簽一樣,來(lái)嵌入html標(biāo)簽,或者嵌套其他組件標(biāo)簽?zāi)?本文將介紹投影的作用。2021-05-05
這篇文章主要介紹了使用Angular CLI從藍(lán)本生成代碼詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-03-03
angularjs實(shí)現(xiàn)的前端分頁(yè)控件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)的前端分頁(yè)控件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了使用angular寫一個(gè)hello world的方法及示例,需要的朋友可以參考下2015-01-01
使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-03-03
AngularJS實(shí)現(xiàn)表單驗(yàn)證功能詳解
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
本文詳細(xì)介紹了從頁(yè)面開始加載到頁(yè)面渲染完畢過程中，AngularJS執(zhí)行了哪些操作,有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下2015-06-06
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11