如何在 AngularJS 中使用 $on 和 $broadcast 来促进控制器之间的通信？

Angular 中的事件传播：了解 $on 和 $broadcast

在 AngularJS 应用程序中，不同控制器之间的通信通常需要传播事件。促进此过程的两个方法是 $on 和 $broadcast。

$broadcast

$broadcast 允许控制器向其所有子控制器发送事件，并且到已注册侦听该事件的其他控制器。要使用 $broadcast 发送事件：

<code class="javascript">$rootScope.$broadcast('event-name');</code>

使用 $rootScope 是因为它是 Angular 应用程序中所有其他作用域的父作用域。

$on

$on 允许控制器监听其他控制器或其父控制器广播的事件。使用 $on 监听事件：

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

$on 的第一个参数是要监听的事件名称，第二个参数是事件发生时将执行的回调函数已收到。回调函数可以选择接收两个参数：“event”和“args”。

示例

考虑问题中描述的情况：

<code class="javascript">angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
  $scope.startScanner = function() {
    // Do something when the button is clicked
  };
}]);</code>

要启用这些控制器之间的通信，您可以使用 $broadcast 和 $on，如下所示：

在 footerController 中：

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

在 codeScannerController 中：

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

当在 footerController 中点击按钮时，scanner-started 事件将会被广播。该事件将由 codeScannerController 接收并处理，从而执行必要的操作。

传递参数

您还可以随事件一起传递参数使用 $rootScope.$broadcast 方法。例如：

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

然后可以在 $on 的回调函数中访问这些参数：

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

以上是如何在 AngularJS 中使用 $on 和 $broadcast 来促进控制器之间的通信？的详细内容。更多信息请关注PHP中文网其他相关文章！