使用 $scope.$emit 和 $scope.$on

Question

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

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

function secondCtrl($scope) {
    $scope.$on('someEvent', function(mass) { console.log(mass); });
}

它不像我认为的那样工作。 $emit和$on如何工作？

Answer 1

首先，父子作用​​域关系很重要。 您有两种可能性来发出一些事件：

• $broadcast -- 向下调度事件到所有子作用域，
• $emit -- 通过作用域层次向上调度事件。

我对您的控制器（范围）关系一无所知，但有几种选择：

1. 如果firstCtrl范围是firstCtrl范围的父secondCtrl ，则您的代码应该通过在firstCtrl $emit替换$emit $broadcast来firstCtrl ：

    function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); }

2. 如果您的范围之间没有父子关系，您可以将$rootScope注入控制器并将事件广播到所有子范围（即也是secondCtrl ）。

    function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); }

3. 最后，当您需要将事件从子控制器分派到范围向上时，您可以使用$scope.$emit 。 如果firstCtrl作用域是firstCtrl作用域的父secondCtrl ：

    function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); }

Answer 2

我还建议将第四个选项作为@zbynour 提出的选项的更好替代方案。

使用$rootScope.$emit而不是$rootScope.$broadcast而不管传输和接收控制器之间的关系。 这样，该事件保留在$rootScope.$$listeners集合中，而使用$rootScope.$broadcast事件传播到所有子作用域，其中大部分可能无论如何都不会成为该事件的侦听器。 当然，在接收控制器的一端，您只需使用$rootScope.$on 。

对于此选项，您必须记住销毁控制器的 rootScope 侦听器：

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

Answer 3

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

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

以下是有关广播和发射如何工作的快速了解。

注意下面的节点； 全部嵌套在节点 3 中。当您遇到这种情况时，您可以使用广播和发射。

注意：本例中每个节点的数量是任意的； 它很容易成为第一； 第二个； 甚至是 1,348。 每个数字只是此示例的标识符。 这个例子的重点是展示 Angular 控制器/指令的嵌套。

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

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

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

如何节点1个发言，节点3？

在文件one.js 中

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

在文件three.js - 需要通信的所有子节点的最上层节点。

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

节点 2 如何与节点 3 对话？

在文件two.js 中

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

在文件three.js - 需要通信的所有子节点的最上层节点。

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

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

在文件three.js - 需要通信的所有子节点的最上层节点。

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

在文件one.js && two.js 中，您想要捕获消息的任何文件或两者。

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

节点 2 如何与节点 1 对话？

在文件two.js 中

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

在文件three.js - 需要通信的所有子节点的最上层节点。

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

在文件one.js 中

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

然而

当您让所有这些嵌套的子节点尝试像这样进行通信时，您会很快看到许多$on's 、 $broadcast's和$emit's 。

这是我喜欢做的事情。

在最上面的父节点（在本例中为3 ...），它可能是您的父控制器...

所以，在文件three.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] };
}

在文件three.js - 需要通信的所有子节点的最上层节点。

我们已经处理过这个了还记得吗？

在文件one.js 中

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

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

希望这可以帮助...

Answer 4

为了将$scope object从一个控制器发送到另一个控制器，我将在这里讨论$rootScope.$broadcast和$rootScope.$emit ，因为它们是最常用的。

案例一：

$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.$on作为听众$scope是自动，即只要$范围被销毁销毁。

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

要么，

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

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

案例2：

$rootScope.$emit:

   $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.$emit+ $rootScope.$on 。 $rootScope.$broadcast + $scope.$on组合会导致严重的性能问题。 那是因为事件将在所有范围内冒泡。

编辑2 ：

此答案中解决的问题已在 angular.js 版本 1.2.7 中解决。 $broadcast 现在避免在未注册的范围内冒泡，并且运行速度与 $emit 一样快。

Answer 5

您必须使用 $rootScope 在同一应用程序中的控制器之间发送和捕获事件。 将 $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 或服务完成的。

Answer 6

你可以从你的控制器调用一个返回一个 promise 的服务，然后在你的控制器中使用它。 并进一步使用$emit或$broadcast通知其他控制器。 就我而言，我必须通过我的服务进行 http 调用，所以我做了这样的事情：

function ParentController($scope, testService) {
    testService.getList()
        .then(function(data) {
            $scope.list = testService.list;
        })
        .finally(function() {
            $scope.$emit('listFetched');
        })


    function ChildController($scope, testService) {
        $scope.$on('listFetched', function(event, data) {
            // use the data accordingly
        })
    }

我的服务看起来像这样

    app.service('testService', ['$http', function($http) {

        this.list = [];

        this.getList = function() {
            return $http.get(someUrl)
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        list = response.data.results;

                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

                }, function(response) {
                    // something went wrong
                    return $q.reject(response.data);
                });

        }

    }])

Answer 7

这是我的功能：

$rootScope.$emit('setTitle', newVal.full_name);

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item) 
        scope.item.name = title;
    else 
        scope.item = {name: title};
});

Answer 8

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
  $scope.$on('MyEvent',function(event,data){    
    $scope.myData = data;
  });
 });

app.controller('childCtrl',function($scope){
  $scope.fireEvent = function(){ 
  $scope.$emit('MyEvent','Any Data');
  }  
 });
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">

{{myData}}

 <div ng-controller="childCtrl">
   <button ng-click="fireEvent()">Fire Event</button>
 </div>

</div>
</body>
</html>

Answer 9

我最后添加了一个外部EventEmitter库来作为服务进行投影，并将其注入到我需要的任何地方。 所以我可以在任何地方“发射”和“开启”任何地方，而无需关心范围继承。 这种方式不那么麻烦，肯定会有更好的性能。 对我来说也更具可读性。

通配符支持： EventEmitter2

良好的表现： eventemitter3

其他选择： 滴灌

Answer 10

下面的代码显示了两个子控制器，从那里将事件向上分派到父控制器（rootScope）

<body ng-app="App">

    <div ng-controller="parentCtrl">

        <p>City : {{city}} </p>
        <p> Address : {{address}} </p>

        <div ng-controller="subCtrlOne">
            <input type="text" ng-model="city" />
            <button ng-click="getCity(city)">City !!!</button>
        </div>

        <div ng-controller="subCtrlTwo">

            <input type="text" ng-model="address" />
            <button ng-click="getAddrress(address)">Address !!!</button>

        </div>

    </div>

</body>

var App = angular.module('App', []);

// parent controller
App.controller('parentCtrl', parentCtrl);

parentCtrl.$inject = ["$scope"];

function parentCtrl($scope) {

    $scope.$on('cityBoom', function(events, data) {
        $scope.city = data;
    });

    $scope.$on('addrBoom', function(events, data) {
        $scope.address = data;
    });
}

// sub controller one

App.controller('subCtrlOne', subCtrlOne);

subCtrlOne.$inject = ['$scope'];

function subCtrlOne($scope) {

    $scope.getCity = function(city) {

        $scope.$emit('cityBoom', city);    
    }
}

// sub controller two

App.controller('subCtrlTwo', subCtrlTwo);

subCtrlTwo.$inject = ["$scope"];

function subCtrlTwo($scope) {

    $scope.getAddrress = function(addr) {

        $scope.$emit('addrBoom', addr);   
    }
}

http://jsfiddle.net/shushanthp/zp6v0rut/

Answer 11

作用域可用于将事件传播、分派给作用域子级或父级。

$emit - 将事件传播给父级。 $broadcast - 将事件传播给孩子。 $on - 监听事件的方法，由 $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/

Answer 12

根据 angularjs 事件文档，接收端应该包含具有类似结构的参数

@参数

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

-- {Object} 由被调用者传递的参数（请注意，这只能是一个更好的总是发送字典对象）

$scope.$on('fooEvent', function (event, args) { console.log(args) }); 从你的代码

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

Answer 13

最简单的方法：

HTML

  <div ng-app="myApp" ng-controller="myCtrl"> 

        <button ng-click="sendData();"> Send Data </button>

    </div>

JavaScript

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            function sendData($scope) {
                var arrayData = ['sam','rumona','cubby'];
                $rootScope.$emit('someEvent', arrayData);
            }

        });
        app.controller('yourCtrl', function($scope, $rootScope) {
            $rootScope.$on('someEvent', function(event, data) {
                console.log(data); 
            }); 
        });
    </script>