How can I use $on and $broadcast in AngularJS to facilitate communication between controllers?

Event Propagation in Angular: Understanding $on and $broadcast

In AngularJS applications, communication between different controllers often requires the propagation of events. Two methods that facilitate this process are $on and $broadcast.

$broadcast

$broadcast allows a controller to send an event to all its child controllers and to other controllers that have registered to listen for that event. To send an event using $broadcast:

<code class="javascript">$rootScope.$broadcast('event-name');</code>

The $rootScope is used because it is the parent scope of all other scopes within an Angular application.

$on

$on allows a controller to listen for events that have been broadcast by other controllers or its parent controller. To listen for an event using $on:

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

The first parameter to $on is the name of the event to listen for, and the second parameter is a callback function that will be executed when the event is received. The callback function can optionally receive two parameters: 'event' and 'args'.

Example

Consider the situation described in the question:

<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>

To enable communication between these controllers, you can use $broadcast and $on as follows:

In footerController:

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

In codeScannerController:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

When the button is clicked in footerController, the scanner-started event will be broadcast. This event will be received and handled by the codeScannerController, allowing the necessary actions to be performed.

Passing Arguments

You can also pass arguments along with the event using the $rootScope.$broadcast method. For example:

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

These arguments can then be accessed in the callback function of $on:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

The above is the detailed content of How can I use $on and $broadcast in AngularJS to facilitate communication between controllers?. For more information, please follow other related articles on the PHP Chinese website!