$scope.$on 在角度服务中的 $rootScope.$broadcast 之后不触发

AngularJS

使用AngularJS开发Web应用程序时，我们经常需要在不同的组件之间进行通信。为了实现这一目的，AngularJS提供了一个强大的事件系统，其中包括了两个主要的API：$rootScope.$broadcast和$scope.$on。

在AngularJS中，$rootScope是一个特殊的作用域对象，它是所有其他作用域对象的祖先。$rootScope.$broadcast方法用于向所有子作用域广播一个事件，以便其他组件可以监听并做出相应的响应。在广播事件时，我们可以传递一些数据作为参数，以便接收者在处理事件时可以使用这些数据。

而$scope是AngularJS中最常用的作用域对象之一，它通常用于控制器和视图之间的数据绑定。当我们需要在控制器中监听一个事件时，可以使用$scope.$on方法。这个方法接受两个参数，第一个参数是要监听的事件名称，第二个参数是一个回调函数，用于处理接收到的事件。

然而，在一些特殊情况下，我们可能会遇到一个问题，就是在使用$scope.$on监听事件时，却无法接收到$rootScope.$broadcast广播的事件。这可能是由于作用域的层次关系所导致的。当我们在一个子作用域中使用$scope.$on监听事件时，如果事件是在父作用域中广播的，那么子作用域将无法接收到这个事件。

为了解决这个问题，我们可以使用$rootScope.$broadcast方法来广播事件，同时在接收事件的地方使用$rootScope.$on来监听事件。这样，无论事件是在哪个作用域中广播的，我们都可以在任何地方接收到这个事件。

下面是一个简单的示例代码，演示了如何在AngularJS中使用$rootScope.$broadcast和$scope.$on进行事件通信：

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentController">
  <button ng-click="broadcastEvent()">Broadcast Event</button>
</div>
<div ng-controller="ChildController">
  <h2>Received Event: {{ receivedEvent }}</h2>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('ParentController', function($rootScope, $scope) {
    $scope.broadcastEvent = function() {
      $rootScope.$broadcast('myEvent', 'Hello from ParentController');
    };
  });
  app.controller('ChildController', function($rootScope, $scope) {
    $rootScope.$on('myEvent', function(event, data) {
      $scope.receivedEvent = data;
    });
  });
</script>
</body>
</html>

在上面的代码中，我们定义了一个父控制器ParentController和一个子控制器ChildController。在父控制器中，我们定义了一个broadcastEvent方法，当按钮被点击时调用该方法来广播一个名为myEvent的事件，并传递一个字符串作为参数。在子控制器中，我们使用$rootScope.$on方法来监听myEvent事件，并将接收到的数据赋值给$scope.receivedEvent变量。最后，我们在视图中显示接收到的事件数据。

通过运行上面的代码，我们可以看到当我们点击“Broadcast Event”按钮时，子控制器中的receivedEvent变量将会被更新，并显示为“Hello from ParentController”。

解决无法接收事件的问题

为了解决在使用$scope.$on监听事件时无法接收到$rootScope.$broadcast广播的事件的问题，我们可以改变监听事件的方式。而不是在子作用域中使用$scope.$on，我们可以在接收事件的地方使用$rootScope.$on来监听事件。这样，无论事件是在哪个作用域中广播的，我们都可以在任何地方接收到这个事件。

下面是修改后的示例代码：

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentController">
  <button ng-click="broadcastEvent()">Broadcast Event</button>
</div>
<div ng-controller="ChildController">
  <h2>Received Event: {{ receivedEvent }}</h2>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('ParentController', function($rootScope, $scope) {
    $scope.broadcastEvent = function() {
      $rootScope.$broadcast('myEvent', 'Hello from ParentController');
    };
  });
  app.controller('ChildController', function($rootScope, $scope) {
    $rootScope.$on('myEvent', function(event, data) {
      $scope.receivedEvent = data;
    });
  });
</script>
</body>
</html>

在上面的代码中，我们只是将子控制器中的$scope.$on改为了$rootScope.$on。这样，无论事件是在哪个作用域中广播的，我们都可以在任何地方接收到这个事件。

通过运行修改后的代码，我们可以看到当我们点击“Broadcast Event”按钮时，子控制器中的receivedEvent变量将会被更新，并显示为“Hello from ParentController”。

在AngularJS中，$rootScope.$broadcast和$scope.$on是实现组件间通信的重要工具。然而，在使用$scope.$on监听事件时，有时可能会出现无法接收到$rootScope.$broadcast广播的事件的问题。为了解决这个问题，我们可以改变监听事件的方式，使用$rootScope.$on来监听事件，这样就可以在任何地方接收到事件。通过合理使用这两个API，我们可以在AngularJS应用程序中实现灵活的组件通信机制。