Event propagation in AngularJS

AngularJS enables us to use in-built directives like ng-click in order to handle DOM events. Apart from this, it also allows us to create custom events and propagate them to controllers. Let's take an example, where you would make an AJAX call to get some data from an API. Now you would like to fetch the data in one controller and display it in another. In this case, once the data is fetched by the first controller, it can notify the second controller and send the data. 

Why there are only two ways to propagate events?

Before getting deep into the answer to this question, let's see what is scope hierarchy in AngularJS. Now assume, you have a view with different scopes defined on various div tags as shown below: 

As we can clearly see, each of the above controllers will have their own scope which makes a hierarchy of scopes.

Emitting allows us to propagate an event in upwards direction, whereas broadcasting allows us to propagate an event in downwards direction in the scope hierarchy.

In the above example, to propagate an event from grandchild to child and further to parent controllers, we use emitting. On the other hand, broadcasting would be used to propagate an event from parent to child to grandchild controllers.

Now, let's see how to use emitting and broadcasting syntactically:

Emitting Events

$scope.$emit(name, args)

The function $emit in $scope is used to emit an event upwards to scope hierarchy to all the registered listeners. The first parameter is the name of the event that is being emitted which will use to notify the scopes when the event occurs. After name as the first parameter, we can pass multiple parameters. Usually, the date which should be shared is passed as the second parameter.

Broadcasting Events

$scope.$broadcast(name, args)

The function $broadcast in $scope is used to broadcast an event downwards into scope hierarchy to all the registered listeners. The parameters are passed in the same way as we have seen in case of emitting an event.

Now, besides knowing how to emit or broadcast an event, it is also important to know how to catch or listen that event in order to consume the passed data. In order to do this, AngularJS provides $on function on the scope which we can register to listen to an event.

Registering Listeners

$scope.$on(name, handlerFucntion)

To register event listeners, the $on function is used, that should be called when the event occurs. The first parameter is the name of the event, whereas the second parameter is a callback function which gets called when the event occurs.

The callback function has two parameters:

1. Event:

This is an event object which gives us the following information about the occurred event:

Name The name of the emitted or broadcasted event,

targetScope: The scope that emitted or broadcasted the event,

current scope: The scope which is currently handling the event, and

stopPropagation: This function stops further propagation of the event and is only available in case of emitted events. An event once broadcasted cannot be stopped because the broadcast events can span across multiple branches as a parent scope which may have multiple child scopes.

2. Args:

One or more arguments that represent the data that was emitted/broadcast.

Now, the question is, what if you want to notify all child scopes if an event occurs?

If you come across this situation, you have got $rootScope. We can treat it as a central message system. So, if event effects all the child scopes, you can broadcast the event on $rootScope.

There another important event in AngularJS, that we need to discuss is the $destroy event.

$scope.$on('$destroy', function(){
});

To destroy a scope, $destroy event is broadcast on the scope. We can listen for this event and perform any cleanup operations. Let's say, you have a timer setup and you want to cancel it to avoid unnecessary consumption of CPU cycles. The digest cycle won't touch a scope that is getting destroyed.

That's all about event propagation

THANKS