如何在 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>

點擊按鈕-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中文網其他相關文章！