AngularJS中控制器之间通信方法

如何在作用域之间通信呢？
    1.创建一个单例服务，然后通过这个服务处理所有子作用域的通信。
    2.通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。


$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit：子传父  传递event与data
$broadcast：父传子 child controller传递event与data
$on：监听或接收数据。。用于接收event与data

$broadcast、$emit事件必须依靠其他事件（ng-click等）进行触发，而不能单纯写一个这个。。
$on倒是可以直接写，因为它属于监听和接收数据的。


$on的方法中的event事件参数：
    event.name 事件名称
    event.targetScope  发出或者传播原始事件的作用域
    event.currentScope 目前正在处理的事件的作用域
    event.stopPropagation()    一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
    event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
    event.defaultPrevented 如果调用了`preventDefault`则为true

基于event传播的方式

基于scope继承的方式只能处理父子级控制器之间的通信问题，不能处理兄弟/相邻控制器之间的通信问题。这时候，我们需要使用基于event传播的方式来进行通信，这里，ng为我们提供了三个方法：$on , $emit ,$broadcast ，需要明确的是：这种方法不仅可以处理兄弟scope间的通信问题，对于解决父子scope间的通信也是毫无压力。

子-->父：$emit

整个过程是这样的：

• 子scope中的控制器通过 $scope.$emit 触发一个事件向上传播

• 这个事件会经过每一层的父scope，至于处不处理是父scope自己的事情了

• 如果处理，就在想要处理的那个祖先scope中放一个 $scope.$on 监听着就行了三四三

• 

   1 // 父scope上的控制器
   2 function Sandcrawler($scope) {
   3     $scope.location = 'Mos Eisley North';
   4     $scope.$on('summon', function(e, newLocation) {
   5         $scope.location = newLocation;
   6     });
   7 }
   8 // 子scope上的控制器
   9 function Droid($scope) {
  10     $scope.location = 'Owen Farm';
  11     $scope.summon = function() {
  12         $scope.$emit('summon', $scope.location);
  13     }
  14 }
  15 // html
  16 <div ng-controller="Sandcrawler">
  17     <p>Sandcrawler Location: </p>
  18     <div ng-controller="Droid">
  19         <p>Droid Location: </p>
  20         <button ng-click="summon()">Summon Sandcrawler</button>
  21     </div>
  22 </div>

  

  如果你不想让你的事件再往更上层传播，在 $on 中的处理函数调用e.stopPropagation() 即可。

父-->子：$broadcast

从父到子，用另外一个方法就是了，同样用 $on 监听着，all done，看下面代码：

// 父scope上的控制器
function Sandcrawler($scope) {
    $scope.location = 'Mos Eisley North';
    $scope.recall = function() {
        $scope.$broadcast('recall', $scope.location);
    }
}
// 子scope上的控制器
function Droid($scope) {
    $scope.location = 'Owen Farm';
    $scope.$on('recall', function(e, newLocation) {
        $scope.location = newLocation;
    });
}
// html
<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: </p>
    <button ng-click="recall()">Recall Droids</button>
    <div ng-controller="Droid">
        <p>Droid Location: </p>
    </div>
</div>

同级之间

拥有同个父scope的子级scope之间，也就是兄弟/相邻scope之间的通信，其实是借助“奶爸”传递消息的：

• 子级scope中有谁想传消息了，$emit 一个给“奶爸”

• 然后通过“奶爸” $broadcast 给所有孩子这个相同的信息，当然发出信息的那个可以选择是否要忽略掉自己发出的信息

 1 // 父scope上的控制器
 2 function Sandcrawler($scope) {
 3     $scope.$on('requestDroidRecall', function(e) {
 4         $scope.$broadcast('executeDroidRecall');
 5     });
 6 }
 7 // 子scope上的控制器
 8 function Droid($scope) {
 9     $scope.location = 'Owen Farm';
10     $scope.recallAllDroids = function() {
11         $scope.$emit('requestDroidRecall');
12     }
13     $scope.$on('executeDroidRecall', function() { 
14         $scope.location = 'Sandcrawler';
15     });
16 }
17 // html
18 <div ng-controller="Sandcrawler">
19     <div ng-controller="Droid">
20         <h2>R2-D2</h2>
21         <p>Droid Location: </p>
22         <button ng-click="recallAddDroids()">Recall All Droids</button>
23     </div>
24     <div ng-controller="Droid">
25         <h2>C-3PO</h2>
26         <p>Droid Location: </p>
27         <button ng-click="recallAddDroids()">Recall All Droids</button>
28     </div>
29 </div>

上面代码中要注意的是：子scope通过 $emit 发出的事件名不能与父scope用 $broadcast 的事件名一样，如果有传参数，那当然参数可以一样，因为参数就是我们要传的数据。事件名不能一样是为了防止进入死循环。