何时在角度中使用 $scope.$on 和 $scope.emit？ [复制]答案

【问题标题】：When to use $scope.$on and $scope.emit on angular? [duplicate]何时在角度中使用 $scope.$on 和 $scope.emit？ [复制]
【发布时间】：2015-07-02 14:39:45
【问题描述】：

何时在angular 上使用$scope.$on 和$scope.emit？我想了解更多关于在角度与使用事件聚合中正确使用此函数的信息。

【问题讨论】：

你需要看看这个toddmotto.com/…
stackoverflow.com/questions/14502006/…

标签： angularjs

【解决方案1】：

AgularJS 为控制器之间基于事件的通信提供 $on、$emit 和 $broadcast 服务。

$发射

它通过作用域层次向上分派一个事件名称，并通知注册的$rootScope.Scope 侦听器。事件生命周期从调用 $emit 的范围开始。事件向上遍历到根范围，并沿途调用所有注册的侦听器。如果其中一个侦听器取消该事件，该事件将停止传播。

<!DOCTYPE html>
<html>
   <head>
      <title>Broadcasting</title>
      <script src="lib/angular.js"></script>
      <script>
         var app = angular.module("app", []);

         app.controller("firstCtrl", function($scope) {
           $scope.$on("eventName", function(event, args) {
             $scope.message = args.message;
             console.log($scope.message);
           });
         });

         app.controller("secondCtrl", function($scope) {
           $scope.handleClick = function(msg) {
             $scope.$emit("eventName", { message: msg });
           };
         });
      </script>
   </head>
   <body ng-app="app">
      <div
         ng-controller="firstCtrl"
         style="border:2px solid #E75D5C; padding:5px;"
         >
         <h1>Parent Controller</h1>
         <p>Emit Message : {{ message }}</p>
         <br />
         <div
            ng-controller="secondCtrl"
            style="border:2px solid #428bca;padding:5px;"
            >
            <h1>Child Controller</h1>
            <input ng-model="msg" />
            <button ng-click="handleClick(msg);">Emit</button>
         </div>
      </div>
   </body>
</html>

它是如何工作的..

$广播

它将事件名称向下调度到所有子范围（及其子范围）并通知已注册的$rootScope.Scope 侦听器。事件生命周期从调用 $broadcast 的范围开始。此范围内事件的所有侦听器都会收到通知。之后，事件向下遍历到子作用域，并沿途调用所有已注册的侦听器。活动无法取消。

<!DOCTYPE html>
<html>
   <head>
      <title>Broadcasting</title>
      <script src="lib/angular.js"></script>
      <script>
         var app = angular.module('app', []);

         app.controller("firstCtrl", function ($scope) {
             $scope.handleClick = function (msg) {
             $scope.$broadcast('eventName', { message: msg });
           };
         });

         app.controller("secondCtrl", function ($scope) {
             $scope.$on('eventName', function (event, args) {
             $scope.message = args.message;
             console.log($scope.message);
           });
         });

      </script>
   </head>
   <body ng-app="app">
      <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
         <h1>Parent Controller</h1>
         <input ng-model="msg">
         <button ng-click="handleClick(msg);">Broadcast</button>
         <br /><br />
         <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
         </div>
      </div>
   </body>
</html>

它是如何工作的..

$on

它监听给定类型的事件。可以捕获$broadcast和$emit.派发的事件

注意

如果您的范围之间没有父子关系，您可以将 $rootScope 注入控制器并将事件广播到所有子范围，但您不能发出您的事件。
- 只有当您具有父子关系并且事件传播由子发起时，您才能发出事件。但是，$emit 只能为所有 $rootScope.$on 侦听器触发事件。

【讨论】：