$emit, $broadcast 和 $on

参考了 Todd Motto 的博文

---

组件需要通信时，我想到了三种方式。

• $scope.$parent

  一层一层地找，直到找到那个目标组件的$scope 为止，但是组件嵌套了三层以上，就得 $scope.$parent.$parent.$parent...是不是很绝望。

• 定义组件是的 bindings

    define(['demo'], function(demo) {
      return demo.component('demoComponent', {
        bindings: {
          param: '<',
          callback: '&'
        },
        templateUrl: 'js/components/demoComponent/demoComponent.component.html',
        controller: demoComponentController,
        controllerAs: 'vm'
      });
    });

    

这种方式常见于 父子组件间的通信

• 通过$scope 事件

1. 事件的发生

   $emit 子组件是给父组件发事件

   $broadcast 父组件是给子组件发事件

    $scope.$emit('儿子发射的消息'，{param: '五行缺金'});

    $scope.$broadcast('来自爸爸的广播'，{param: '十亿拿好'});

2. 事件的监听

   在组件的 controller 中，通过$scope.$on 监听事件。

   区别事件是在于事件的命名空间，例如：‘儿子发射的消息’和‘来自爸爸的广播’

    $scope.$on('儿子发射的消息', function($event, param){
      // 给钱
    });

    $scope.$on('来自爸爸的广播', function($event, param){
      // 收钱
    });

3. 阻止事件

   只有用$emit 的时间才可以取消, 也就是说儿子不能阻止爸爸的消息传给别的儿子，或者孙子，爸爸可以阻止儿子的消息传给爷爷==，嗯， 是的

   $scope.$on('儿子发射的消息', function($event, param){
     // 不能告诉你爷爷, 知道吧？
     \$event.stopPropagation();
   });
   

4. 取消事件监听

   在组件销毁前，把去掉事件监听，正如大神博文所说的，AngularJS 的文档中并没有取消监听的方法，于是乎。。。

    app.controller('ParentCtrl',
      function ParentCtrl ($scope) {

      // $rootScope $on
      var myListener = $rootScope.$on('child', function (event, data) {
        //
      });

      // $scope $destroy
      $scope.$on('$destroy', myListener);

    });

---

大神的博文还说到了其他的点，这里只简单了 记录了在下在项目中用到的，经过实验验证过的点，详细的可以拜读大神的 原文。