Angular 提供了两种基本的事件通信方法,$on 和 $broadcast,它们允许应用程序中的组件进行通信与彼此。了解这些方法的工作原理对于 Angular 应用程序中有效的事件处理至关重要。
$broadcast
当控制器中发生事件时,例如单击 footer.html 中的某个元素footerController,它可以使用 $broadcast 广播到应用程序的其他部分。此方法采用事件名称和可选参数作为参数。
<code class="javascript">$rootScope.$broadcast('scanner-started');</code>
$on
其他组件可以使用 $on 订阅这些事件。该方法采用事件名称和回调函数作为参数。当事件被广播时,回调函数被触发,提供对 $broadcast 传递的任何参数的访问。
<code class="javascript">$scope.$on('scanner-started', function(event, args) { // do what you want to do });</code>
示例
考虑需要 startScanner 事件的 codeScannerController开始扫描代码。 footerController 可以在点击某个元素时触发此事件。
<code class="javascript">// In footerController $scope.startScanner = function() { $rootScope.$broadcast('scanner-started', { any: {} }); } // In codeScannerController $scope.$on('scanner-started', function(event, args) { var anything = args.any; // do what you want to do });</code>
用法
$on 和 $broadcast 通常用于促进不同组件之间的通信,例如控制器、服务和指令。它们允许在整个应用程序中触发和处理事件,从而实现松散耦合的设计。
以上是$on 和 $broadcast 如何在 Angular 中启用事件通信?的详细内容。更多信息请关注PHP中文网其他相关文章!