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>