在 AngularJS 中，有时我们需要在父子级组件间实现通讯，而 $scope.$broadcast 和 $scope.$on 就是两个用来实现这种通讯的关键性方法。本文将会介绍如何在 AngularJS 应用中使用这两个方法来实现组件父子级之间的通讯
$scope.$broadcast
$scope.$broadcast 方法可以用来向所有子级组件广播一个事件。子级组件可以用 $scope.$on 方法来监听该事件。下面是一个简单的 $broadcast 事件的示例代码：
-- -------------------- ---- -------
-- ----
------------------------------------------------ ---------------- -
---------------------------- ----- -------
---
-- ----
----------------------------------------------- ---------------- -
--------------------- --------------- ----- -
------------------ -- ----- -----
---
---$scope.$broadcast 方法可以接受多个参数，第一个参数为事件名，接下来的参数为传递给子级组件的数据。当使用 $scope.$broadcast 方法时，所有的子级组件都将会接收到这个事件及其传递的数据。
$scope.$on
$scope.$on 方法可以在子级组件中监听一个事件。当事件被广播时，这个方法就会被触发并且从其参数中获取数据。下面是一个简单的 $on 事件的示例代码：
-- -------------------- ---- -------
-- ----
------------------------------------------------ ---------------- -
-- -- ---------
---
-- ----
----------------------------------------------- ---------------- -
--------------------- --------------- ----- -
------------------ -- ----- -----
---
---在子级组件中使用 $scope.$on 方法可以接受两个参数：第一个参数为事件名，第二个参数为事件触发时传递给子级组件的数据。
示例代码
下面是一个更完整的示例代码，展示了如何在不同的父子级组件中实现使用 $scope.$broadcast 和 $scope.$on 来实现通讯：
-- -------------------- ---- -------
-- ---- -
------------------------------------------------- ---------------- -
---------------------------- ----- ---- ------ ----
---
-- ---- -
------------------------------------------------ ---------------- -
--------------------- --------------- ----- -
------------------ -- ----- ---- ------ --
-------------------- - ----- ---- ----- ---
-------------------------- -------------------- --
---
---
-- ---- -
------------------------------------------------- ---------------- -
-- -- ---------
---
-- ---- -
------------------------------------------------ ---------------- -
------------------------ --------------- ----- -
------------------ -- ----- ---- ----- --
---
---在这个示例中，父级组件 1 使用 $scope.$broadcast 方法向所有子级组件广播 myEvent 事件，并传递 data from parent 1 这个数据。其中，子级组件 1 使用 $scope.$on 方法来监听 myEvent 事件并获取传递的数据。在该事件处理过程中，子级组件 1 同时使用 $scope.$emit 方法向父级组件 1 广播一个名为 childEvent 的事件，并将 $scope.dataFromChild 作为传递的数据。在子级组件 2 中，使用 $scope.$on 方法来监听 childEvent 事件并获取数据。在整个事件处理流程中，父子级组件间实现了数据的相互传递。
总结
在 AngularJS 中，使用 $scope.$broadcast 和 $scope.$on 方法来实现组件父子级之间的通讯是一个常见的方式。这种方法在实现数据共享，状态同步等功能方面有着很好的表现。开发者们在应用 AngularJS 框架时，应该熟练掌握使用这两个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64647d6d968c7c53b055a528