日常开发中，难免会有不同作用域之间的数据需求。对于controller之间通信有不同的方式可以做到。

用 Angular 进行开发，基本上都会遇到 Controller 之间通信的问题，本文对此进行一个总结。

一.$rootscope

通过$rootscope定义的全局变量, 在各个controller里面都可以显示，也都可以修改。

二.作用域继承

在controller的父子关系中，子controller可以继承到父级所有的$scope数据，子级中再声明时，会覆盖父级同名属性，只适用于父级向子级通信，而无法向上传递数据。

三.$watch

• 父作用域监视子作用域

  1 2 3 4 5 6

  .controller("Parent", function($scope){ $scope.VM = {a: "a", b: "b"}; $scope.$watch("VM.a", function(newVal, oldVal){ // react }); }

• 子作用域监视父作用域

  1 2 3 4 5

  .controller("child", function($scope){ $scope.$parent.$watch($scope.VM.a, function(){ //react }); }

四.消息机制

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data

1
2
3
4
5
6
7
8
9
10
11

$scope.$broadcast('to-child', 'child');
$scope.$emit('to-parent', 'parent');		//事件名，事件对象

父级中
$scope.$on('to-parent', function(event,data) {
    console.log('ParentCtrl', data);       //父级能得到$emit发送的parent
});
子级中
$scope.$on('to-child', function(event,data) {
    console.log('ChildCtrl', data);         //子级能得到$broadcast发送的child
});

使用$rootscope可以接受到所有$emit的数据

五.专用service

1
2
3
4
5
6
7
8
9
10
11

myApp.factory('myService', function () {
    return { message: "I'm data from a service" };
});
 
function FirstCtrl($scope, Data) {
    $scope.data = myService.message;
}
 
function SecondCtrl($scope, Data) {
    $scope.data = myService.message;
}