AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式，来实现数据和代码的共享和复用，但在实际的项目开发中，或许是处于懒惰，亦或是为了便利，总会想在两个控制器之间，直接进行数据的共享通信，或者是函数与方法的调用，这里我们就看看有哪些方法可以满足这个要求。
单例服务
单例服务是 AngularJS 本身支持的数据和代码共享方式，因为是单例的，所有的控制器访问的便是同一份数据。比如，下面的 Service 便可以实现：
在一个控制器中，调用 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()
来获取数据下面是简单的用法：
// other controller
angular
.module('app')
.controller('AnotherController',AnotherController]);
function AnotherController($scope){
$scope.$on('open.notice.editor',function(event,data){
$scope.open(data);
$scope.$emit('notice.editor.opened');
});
}
父控制器
如果两个控制器共同拥有同一个父控制器，则可以通过父控制器来进行数据共享和通信。比如：
// 子控制器
angular
.module('app')
.controller('ChildOneController',ChildOneController]);
function ChildOneController($scope){
// 数据设置
$scope.$parent.data = 1;
}
// 子控制器
angular
.module('app')
.controller('ChildTwoController','$timeout',ChildTwoController]);
function ChildTwoController($scope,$timeout){
$timeout(function(){
// 数据读取
console.log($scope.$parent.data);
},1000);
}
全局或共用的变量
AngularJS 提供了对
window
和localStorage
两个变量的封装，$window
和$localStorage
，通过修改和监听这两个值，可以达到在控制器之间数据共享和通信的目的。方法如下：// other controller
angular
.module('app')
.controller('AnotherController',AnotherController]);
function AnotherController($scope){
// 监听修改
$scope.$watch(function(){
return $window.data;
},function(n){
$scope.windowData = n;
});
}
其实，这种监听修改的方式，也可以用在其它通信方式中。
元素绑定
AngularJS 中，可以通过一个元素，来获取其上的控制器实例。通过这种方式便可以快速的获取 修改某个控制器中的数据，或者调用这个控制器中的方法。比如：
接着，便可以通过这个
instance
来调用控制器的方法，获取和修改值了。无法是元素本身绑定有控制器，还是元素的父级元素绑定有控制器，都可以成功的获取。本文关于Angular控制器之间的数据共享与通信就介绍到这了，对angularjs共享数据相关知识感兴趣的朋友可以一起学习，谢谢大家支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
