Configuring and using AngularJS events

AngularJS offers a powerful event infrastructure that affords you the ability to control the application in scenarios where data binding might not be suitable or pragmatic. Even with a rigorously organized application topology, there are lots of applications for events in AngularJS.

How to do it…

AngularJS events are identified by strings and carry with them a payload that can take the form of an object, a function, or a primitive. The event can either be delivered via a parent scope that invokes $scope.$broadcast(), or a child scope (or the same scope) that invokes $scope.$emit().

The $scope.$on() method can be used anywhere a scope object can be used, as shown here:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope, $log) {
  $scope.$on('myEvent', function(event, data) {
    $log.log(event.name + ' observed with payload ', data);
  });
});

Broadcasting an event

The $scope.$broadcast() method triggers the event in itself and all child...