AngularJS控制器之間的資料共用及通訊詳解_AngularJS

AngularJS 本身已經提供了像指令 Directive 和 服務 Service 一類的方式，來實現資料和代碼的共用和複用，但在實際的項目開發中，或許是處於懶惰，亦或是為了便利，總會想在兩個控制器之間，直接進行資料的共用通訊，或者是函數與方法的調用，這裡我們就看看有哪些方法可以滿足這個要求。

單例服務

單例服務是 AngularJS 本身支援的資料和代碼共用方式，因為是單例的，所有的控制器訪問的便是同一份資料。比如，下面的 Service 便可以實現：

angular .module('app') .service('ObjectService', [ObjectService]);function ObjectService() { var list = {}; return {  get: function(id){   return list[id];  },  set: function(id, v){   list[id] = v;  } };}

在一個控制器中，調用 ObjectService.set('i', 1) 設定的資料，在其它控制器中，便可以通過 ObjectService.get('i') 來擷取。

廣播與事件

AngularJS 中在觸發事件和發送廣播時，都可以傳遞參數，可以通過這一特性，來實現資料的共用。與事件和廣播相關的，共有三個方法，分別是：

    1.$emit()：觸發事件，它可以向上傳遞資料，比如，子控制器向父控制器，還有控制器向 $rootScope

    2.$broadcast()：發送廣播，它可以向下傳遞資料，比如，父控制器向子控制器傳遞資料，或者 $rootScope 向任意控制器傳遞資料

    3.$on()：監聽事件與廣播，可以捕獲 $emit 和 $broadcast

可以將控制器之間的通訊，分為三種情形：

    1.無直接關聯的控制器：使用 $rootScope.$emit()、$rootScope.$boardcast() 或 $scope.$emit 來發出資料，通過 $rootScope.$on() 來擷取資料

    2.父控制器到子控制器：父控制器使用 $scope.$boradcast() 來發送資料，子控制器通過 $scope.$on() 來擷取資料

    3.子控制器至父控制器：子控制器使用 $scope.$emit() 來發送資料，父控制器通過 $scope.$on() 來擷取資料

下面是簡單的用法：

// one controllerangular .module('app') .controller('OneController', ['$scope', OneController]);function OneController($scope){ var data = {value: 'test'}; $rootScope.$broadcast('open.notice.editor', data);}// other controllerangular .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'); });}

父控制器

如果兩個控制器共同擁有同一個父控制器，則可以通過父控制器來進行資料共用和通訊。比如：

<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){ // 用於傳遞資料的變數 $scope.data = null;}// 子控制器angular .module('app') .controller('ChildOneController', ['$scope', ChildOneController]);function ChildOneController($scope){ // 資料設定 $scope.$parent.data = 1;}// 子控制器angular .module('app') .controller('ChildTwoController', ['$scope', '$timeout', ChildTwoController]);function ChildTwoController($scope, $timeout){ $timeout(function(){  // 資料讀取  console.log($scope.$parent.data); }, 1000);}

全域或共用的變數

AngularJS 提供了對 window 和 localStorage 兩個變數的封裝，$window 和 $localStorage ，通過修改和監聽這兩個值，可以達到在控制器之間資料共用和通訊的目的。方法如下：

// one controllerangular .module('app') .controller('OneController', ['$scope', '$window', OneController]);function OneController($scope, $window){ // 資料設定 $window.data = 1;}// other controllerangular .module('app') .controller('AnotherController', ['$scope', AnotherController]);function AnotherController($scope){ // 監聽修改 $scope.$watch(function(){  return $window.data; }, function(n){  $scope.windowData = n; });}

其實，這種監聽修改的方式，也可以用在其它通訊方式中。

元素繫結

AngularJS 中，可以通過一個元素，來擷取其上的控制器執行個體。通過這種方式便可以快速的擷取
修改某個控制器中的資料，或者調用這個控制器中的方法。比如：

<div ng-controller="AppController"> <div id="div-a"></div></div>

可以通過以下的方法，來擷取控制器執行個體：

var instance = angular.element(document.getElementById('div-a')).scope();

接著，便可以通過這個 instance 來調用控制器的方法，擷取和修改值了。無法是元素本身綁定有控制器，還是元素的父級元素繫結有控制器，都可以成功的擷取。

本文關於Angular控制器之間的資料共用與通訊就介紹到這了，對angularjs共用資料相關知識感興趣的朋友可以一起學習，謝謝大家支援雲棲社區。