Angular中Controller之間的訊息傳遞（第二種辦法）：$emit,$broadcast,$on

• • $emit只能傳遞給parent controllerevent與data( $emit(name, args) )
  • $broadcast只能傳遞給child controllerevent與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>

  

  #JS：

  

  #

  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);         //平级得不到值
    });
  });

  

  #點選click運行結果：

  ChildCtrl child controller.
  ParentCtrl parent

  在$on的方法中的event事件參數，其物件的屬性與方法如下

  事件屬性	目的
  event.targetScope	發出或傳播原始事件的作用域
  event.currentScope	目前正在處理的事件的作用域
  event.name	事件名稱
  event.stopPropagation()	#一個防止事件進一步傳播(冒泡/捕獲)的函數(這只適用於使用`$emit`發出的事件)
  event.preventDefault()	這個方法其實不會做什麼事，但是會設定`defaultPrevented`為true。直到事件監聽器的實作者採取行動之前它才會檢查`defaultPrevented`的值。
  event.defaultPrevented	##如果呼叫了`preventDefault`則為true

   
   

  標籤: Angularjs

###

以上是Angular中Controller之間的訊息傳遞（第二種辦法）：$emit,$broadcast,$on的詳細內容。更多資訊請關注PHP中文網其他相關文章！