AngularJS 广播事件 $broadcast 一次，$ on 两次

在本文中，我们将介绍AngularJS中的事件广播机制，特别是 $broadcast和$ on方法，并通过示例说明它们的使用。

什么是事件广播？

AngularJS是一个用于构建Web应用程序的JavaScript框架。它提供了一种事件驱动的编程模型，通过广播事件来实现不同组件之间的通信。

事件广播在AngularJS应用程序中起到了重要的作用，它允许我们在多个组件之间传递数据和通知状态的变化。在AngularJS中，我们可以使用 $rootScope对象的$ broadcast方法来触发事件广播，而使用 $scope对象的$ on方法来监听广播事件。

$broadcast方法

AngularJS中的 $broadcast方法用于向下广播事件。它会从$ rootScope开始，向下遍历整个作用域层级，并沿着作用域树向下传递广播事件。所有子作用域都可以通过 $on方法来监听并接收广播事件。$

下面是一个broadcast方法的示例：

// 定义一个控制器
app.controller('MyController', function(scope) {
  // 定义广播事件的处理程序scope.on('myEvent', function(event, data) {
    console.log(data); // 输出 'Hello, AngularJS!'
  });

  // 触发广播事件scope.$broadcast('myEvent', 'Hello, AngularJS!');
});

在上面的示例中，我们定义了一个控制器MyController，通过 $scope的$ on方法来监听名为myEvent的广播事件。当事件被触发时，控制台会输出接收到的数据。

需要注意的是， $broadcast方法是向下广播事件，只有子作用域可以接收到广播事件。而同级或父级作用域上的$ on方法是无法接收到广播事件的。

$on方法

AngularJS中的 $on方法用于监听广播事件。我们可以通过$ scope对象的 $on方法来注册事件监听器，监听并接收特定的广播事件。$

下面是一个on方法的示例：

// 定义一个控制器
app.controller('MyController', function(scope,rootScope) {
  // 监听广播事件
  scope.on('myEvent', function(event, data) {
    console.log(data); // 输出 'Hello, AngularJS!'
    rootScope.broadcast('anotherEvent', 'Hello, World!'); // 广播另一个事件
  });
});

在上面的示例中，我们注册了一个名为myEvent的广播事件监听器，通过 $scope的$ on方法来监听该事件。当事件被触发时，控制台会输出接收到的数据，并同时触发另一个广播事件。

需要注意的是， $on方法可以在任何作用域中使用。当我们在子作用域中注册了一个事件监听器时，它会接收到从父级或同级作用域广播过来的事件。即使在$ rootScope上注册的事件，也可以在子作用域中接收到。

示例解析

为了更好地理解 $broadcast和$ on的使用，我们来看一个示例。

// 定义一个控制器
app.controller('ParentController', function(scope) {
  // 触发广播事件scope.broadcast('myEvent', 'Hello, AngularJS!');
});

// 定义另一个控制器
app.controller('ChildController', function(scope) {
  // 监听广播事件
  scope.on('myEvent', function(event, data) {
    console.log(data); // 输出 'Hello, AngularJS!'
  });
});