AngularJS 本身已經(jīng)提供了像指令 Directive 和 服務(wù) Service 一類(lèi)的方式，來(lái)實(shí)現(xiàn)數(shù)據(jù)和代碼的共享和復(fù)用，但在實(shí)際的項(xiàng)目開(kāi)發(fā)中，或許是處于懶惰，亦或是為了便利，總會(huì)想在兩個(gè)控制器之間，直接進(jìn)行數(shù)據(jù)的共享通信，或者是函數(shù)與方法的調(diào)用，這里我們就看看有哪些方法可以滿足這個(gè)要求。

單例服務(wù)

單例服務(wù)是 AngularJS 本身支持的數(shù)據(jù)和代碼共享方式，因?yàn)槭菃卫?，所有的控制器訪問(wè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ù)，在其它控制器中，便可以通過(guò) ObjectService.get('i') 來(lái)獲取。

廣播與事件

AngularJS 中在觸發(fā)事件和發(fā)送廣播時(shí)，都可以傳遞參數(shù)，可以通過(guò)這一特性，來(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)聽(tīng)事件與廣播，可以捕獲 $emit 和 $broadcast

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

    1.無(wú)直接關(guān)聯(lián)的控制器：使用 $rootScope.$emit()、$rootScope.$boardcast() 或 $scope.$emit 來(lái)發(fā)出數(shù)據(jù)，通過(guò) $rootScope.$on() 來(lái)獲取數(shù)據(jù)

    2.父控制器到子控制器：父控制器使用 $scope.$boradcast() 來(lái)發(fā)送數(shù)據(jù)，子控制器通過(guò) $scope.$on() 來(lái)獲取數(shù)據(jù)

    3.子控制器至父控制器：子控制器使用 $scope.$emit() 來(lái)發(fā)送數(shù)據(jù)，父控制器通過(guò) $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è)父控制器，則可以通過(guò)父控制器來(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 ，通過(guò)修改和監(jiān)聽(tīng)這兩個(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)聽(tīng)修改
 $scope.$watch(function(){
  return $window.data;
 }, function(n){
  $scope.windowData = n;
 });
}

其實(shí)，這種監(jiān)聽(tīng)修改的方式，也可以用在其它通信方式中。

元素綁定

AngularJS 中，可以通過(guò)一個(gè)元素，來(lái)獲取其上的控制器實(shí)例。通過(guò)這種方式便可以快速的獲取
修改某個(gè)控制器中的數(shù)據(jù)，或者調(diào)用這個(gè)控制器中的方法。比如：

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

可以通過(guò)以下的方法，來(lái)獲取控制器實(shí)例：

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

接著，便可以通過(guò)這個(gè) instance 來(lái)調(diào)用控制器的方法，獲取和修改值了。無(wú)法是元素本身綁定有控制器，還是元素的父級(jí)元素綁定有控制器，都可以成功的獲取。

本文關(guān)于Angular控制器之間的數(shù)據(jù)共享與通信就介紹到這了，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友可以一起學(xué)習(xí)，謝謝大家支持腳本之家。

最新評(píng)論