$on、$emit和$broadcast的使用

• $emit只能向parent controller傳遞event與data( $emit(name, args) )
• $broadcast只能向child controller傳遞event與data( $broadcast(name, args) )
• $on用於接收event與data( $on(name, listener) )

  <div ng-controller="ParentCtrl">              <!--父級-->
    <div ng-controller="SelfCtrl">              <!--本身-->
      <a ng-click="click()">click me</a>
      <div ng-controller="ChildCtrl"></div>     <!--子級-->
    </div>
    <div ng-controller="BroCtrl"></div>         <!--平級-->
  </div>
  var app = angular.module('myApp', []);
  app.controller('SelfCtrl', function($scope) {
    $scope.click = function () {
      $scope.$broadcast('to-child', 'child');
      $scope.$emit('to-parent', 'parent');
    }
  });
   
  app.controller('ParentCtrl', function($scope) {
    $scope.$on('to-parent', function(event,data) {
      console.log('ParentCtrl', data);       //父級能獲得值
    });
    $scope.$on('to-child', function(event,data) {
      console.log('ParentCtrl', data);       //子級得不到值
    });
  });
   
  app.controller('ChildCtrl', function($scope){
    $scope.$on('to-child', function(event,data) {
      console.log('ChildCtrl', data);      //子級能獲得值
    });
    $scope.$on('to-parent', function(event,data) {
      console.log('ChildCtrl', data);      //父級得不到值
    });
  });
   
  app.controller('BroCtrl', function($scope){
    $scope.$on('to-parent', function(event,data) {
      console.log('BroCtrl', data);         //平級得不到值
    });
    $scope.$on('to-child', function(event,data) {
      console.log('BroCtrl', data);         //平級得不到值
    });
  });
  

  在$on的方法中的event事件參數，其對象的屬性和方法以下

  事件屬性	目的
  event.targetScope	發出或者傳播原始事件的做用域
  event.currentScope	目前正在處理的事件的做用域
  event.name	事件名稱
  event.stopPropagation()	一個防止事件進一步傳播(冒泡/捕獲)的函數(這隻適用於使用`$emit`發出的事件)
  event.preventDefault()	這個方法實際上不會作什麼事，可是會設置`defaultPrevented`爲true。直到事件監聽器的實現者採起行動以前它纔會檢查`defaultPrevented`的值。
  event.defaultPrevented	若是調用了`preventDefault`則爲true