Event Dispatching in Angular


AngularJS provides an Event dispatching system allowing the communication between controllers or services and controllers.

$broadcast dispatches the event downwards through the child scopes

$emit dispatches the event upwards through the scope hierarchy

$on catches the event passing by that scope


You can usually see it being used from $rootScope or $scope

$scope.$broadcast('eventName', arg);
$rootScope.$broadcast('eventName', arg);

$scope.$emit('eventName', arg);
$rootScope.$emit('eventName', arg);

$scope.$on('eventToCatch', function);
$rootScope.$on('eventToCatch', function);

Now, there are a few things to know about using it from $rootScope:

  • Both $rootScope.$emit and $rootScope.$broadcast go through child scopes since $rootScope doesn't have a parent
  • $rootScope.$emit can only be received by $rootScope.$on
  • $rootScope.$broadcast can be received by $rootScope.$on and $scope.$on
  • $rootScope.$on listener needs to be removed by hand (Memory leak if forgotten)

How we are using it in the project

  • Usage of event dispatching should be limited if possible
  • We only use $rootScope.$broadcast and $scope.$on for event dispatching/catching
  • We are grouping all the $scope.$on functions at the end of the compponent using it (controller or service)

Performances

Using $broadcast might not seem optimum if we consider the description we have above.

However, it is optimized to only go through branches that have a matching event binding. (cf. this post)