Angularjs $broadcast 一次，$on 两次

AngularJS

AngularJS是一种流行的JavaScript框架，被广泛用于开发单页面应用程序（SPA）。在AngularJS中，有两个重要的事件传播机制：$broadcast和$on。$broadcast用于向下级作用域广播事件，而$on用于在作用域中监听事件的触发。本文将探讨关于$broadcast一次，$on两次的用法，并通过实例代码进行演示。

$broadcast事件的用法

首先，让我们来了解一下$broadcast事件的用法。$broadcast事件是从父级作用域向下级作用域广播事件的机制。当一个事件被广播时，所有的子作用域都会接收到这个事件，并可以通过$on来监听。

在下面的示例中，我们创建了一个包含两个子作用域的父作用域。当点击按钮时，父作用域会广播一个事件，并将消息传递给子作用域。子作用域通过监听事件，并将消息打印到控制台上。

Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.$broadcast('myEvent', 'Hello from parent scope!');
});
app.controller('childCtrl', function($scope) {
  $scope.$on('myEvent', function(event, message) {
    console.log(message);
  });
});

在上面的代码中，当点击按钮时，父作用域会广播名为'myEvent'的事件，并传递消息'Hello from parent scope!'给子作用域。子作用域通过监听'myEvent'事件，并将消息打印到控制台上。

$on事件的用法

接下来，我们将介绍$on事件的用法。$on事件用于在作用域中监听事件的触发。当一个事件被触发时，$on会执行相应的回调函数。

在下面的示例中，我们创建了一个子作用域，并在该作用域中监听一个名为'myEvent'的事件。当该事件被触发时，回调函数会将事件和消息打印到控制台上。

Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.$broadcast('myEvent', 'Hello from parent scope!');
});
app.controller('childCtrl', function($scope) {
  $scope.$on('myEvent', function(event, message) {
    console.log(event);
    console.log(message);
  });
});

在上面的代码中，子作用域通过$on监听'myEvent'事件，并在事件被触发时执行回调函数。回调函数接收两个参数：事件对象和消息。事件对象包含了关于事件的详细信息，而消息则是从父作用域传递过来的。

在本文中，我们学习了AngularJS中$broadcast和$on的用法。$broadcast用于向下级作用域广播事件，而$on用于在作用域中监听事件的触发。通过实例代码的演示，我们了解了如何使用这两个事件传播机制来实现父子作用域之间的通信。

无论是在大型应用程序还是小型项目中，了解和掌握这两个事件传播机制都是非常重要的。它们可以帮助我们更好地组织和管理代码，提高开发效率。

希望本文对你理解和使用AngularJS的$broadcast和$on事件有所帮助！