作用域可用于将事件传播、分派到作用域的子对象或父对象。

$emit -将事件传播到父节点。$broadcast -向儿童传播事件。 监听事件的方法，由$emit和$broadcast传播。

index . html示例:

<div ng-app="appExample" ng-controller="EventCtrl">
      Root(Parent) scope count: {{count}}
  <div>
      <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
      <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>

      Childrent scope count: {{count}} 
  </div>
</div>

示例app.js:

angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

在这里你可以测试代码: http://jsfiddle.net/zp6v0rut/41/

根据angularjs事件文档，接收端应该包含这样结构的参数

@params

——{Object} event是包含事件信息的事件对象

——由被调用者传递的{Object}参数(注意，这只能是一个，所以总是在字典对象中发送更好)

美元的范围。$on('fooEvent'，函数(事件，args) {console.log(args)}); 从你的代码

另外，如果你想让共享信息在不同的控制器间可用，还有另一种方法可以实现，那就是angular服务。由于服务是单例的，信息可以跨控制器存储和获取。只需在该服务中创建getter和setter函数，公开这些函数，在服务中创建全局变量并使用它们存储信息

你必须使用$rootScope在同一个应用程序的控制器之间发送和捕获事件。下面是一个工作示例。

app.controller('firstCtrl', function($scope, $rootScope) {        
        function firstCtrl($scope) {
        {
            $rootScope.$emit('someEvent', [1,2,3]);
        }
}

app.controller('secondCtrl', function($scope, $rootScope) {
        function secondCtrl($scope)
        {
            $rootScope.$on('someEvent', function(event, data) { console.log(data); });
        }
}

链接到$scope对象的事件只在所有者控制器中工作。控制器之间的通信是通过$rootScope或Services完成的。

如何将我的$scope对象从一个控制器发送到另一个使用。$emit和。$on方法?

你可以在应用的层次结构中发送任何你想要的对象，包括$scope。

下面简要介绍一下广播和发射的工作原理。

注意下面的节点;都嵌套在节点3中。在这种情况下使用broadcast和emit。

注意:本例中每个节点的编号是任意的;它很容易成为第一;数字2;甚至是1348。对于这个例子，每个数字只是一个标识符。这个例子的重点是展示Angular控制器/指令的嵌套。

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

看看这棵树。你如何回答以下问题?

注意:还有其他方法来回答这些问题，但这里我们将讨论广播和发射。此外，当阅读下面的文本时，假设每个数字都有自己的文件(指令，控制器)例如one.js, two.js, three.js。

节点1如何与节点3通信?

在文件1。js中

scope.$emit('messageOne', someValue(s));

在文件3 .js中——所有需要通信的子节点的最上面的节点。

scope.$on('messageOne', someValue(s));

节点2如何与节点3通信?

在文件two.js中

scope.$emit('messageTwo', someValue(s));

在文件3 .js中——所有需要通信的子节点的最上面的节点。

scope.$on('messageTwo', someValue(s));

节点3如何与节点1和/或节点2通信?

在文件3 .js中——所有需要通信的子节点的最上面的节点。

scope.$broadcast('messageThree', someValue(s));

在文件one.js && two.js中，你想要捕获消息的文件或两者都有。

scope.$on('messageThree', someValue(s));

节点2如何与节点1通信?

在文件two.js中

scope.$emit('messageTwo', someValue(s));

在文件3 .js中——所有需要通信的子节点的最上面的节点。

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

在文件1。js中

scope.$on('messageTwo', someValue(s));

然而

当所有这些嵌套的子节点试图像这样通信时，您将很快看到许多$on、$broadcast和$emit。

这是我喜欢做的事情。

在最上面的父节点中(在本例中是3…)，这可能是你的父控制器…

在文件3。js中

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

现在，在任何子节点中，您只需要$emit消息或使用$on捕获它。

注意:通常很容易在一个嵌套路径中进行交叉对话，而不需要使用$emit、$broadcast或$on，这意味着大多数用例都是用于试图让节点1与节点2通信，反之亦然。

节点2如何与节点1通信?

在文件two.js中

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

在文件3 .js中——所有需要通信的子节点的最上面的节点。

我们已经处理过了，记得吗?

在文件1。js中

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

您仍然需要对想要捕获的每个特定值使用$on，但是现在您可以在任何节点中创建您喜欢的任何值，而不必担心在捕获和广播通用的pushChangesToAllNodes时如何通过父节点间隙获取消息。

作用域可用于将事件传播、分派到作用域的子对象或父对象。

$emit -将事件传播到父节点。$broadcast -向儿童传播事件。 监听事件的方法，由$emit和$broadcast传播。

index . html示例:

<div ng-app="appExample" ng-controller="EventCtrl">
      Root(Parent) scope count: {{count}}
  <div>
      <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
      <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>

      Childrent scope count: {{count}} 
  </div>
</div>

示例app.js:

angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

在这里你可以测试代码: http://jsfiddle.net/zp6v0rut/41/

为了将$scope对象从一个控制器发送到另一个控制器，我将讨论$rootScope。$broadcast和$rootScope。$emit是最常用的。

案例1:

$rootScope.$broadcast：-

$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name

$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event

$rootScope监听器不会自动销毁。你需要使用$destroy来销毁它。最好使用$scope。$scope上的监听器$on被自动销毁，即一旦$scope被销毁。

$scope.$on('myEvent', function(event, data) {}

Or,

  var customeEventListener = $rootScope.$on('myEvent', function(event, data) {

  }
  $scope.$on('$destroy', function() {
        customeEventListener();
  });

案例2:

rootScope。美元发出:

   $rootScope.$emit('myEvent',$scope.data);

   $rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works

$emit和$broadcast的主要区别是$rootScope。$emit事件必须使用$rootScope监听。$on，因为触发的事件从来没有向下通过作用域树。 在这种情况下，您还必须像使用$broadcast一样销毁侦听器。

编辑:

我不喜欢使用$rootScope。$broadcast + $scope。$on但使用 rootScope美元。发出+ rootScope。美元美元。rootScope美元。美元广播+ 美元的范围。$on组合可能会导致严重的性能问题。这是 因为事件会在所有范围内扩散。

编辑2:

在这个回答中提到的问题已经在angular.js中解决了 1.2.7。编写版本$broadcast现在避免冒泡未注册的作用域 运行速度和$emit一样快。