Scope Event propagation in AngularJS

Angular provides a very powerful means to transfer messages to scopes at different hierarchical level. We can dispatch an event upwards through the scope hierarchy by notifying all the registered “$rootScope.Scope” listeners in the hierarchy or downwards to all the child scopes.

Angular provides these two functions to achieve the event propagation in a hierarchical manner:

• $emit – To propagate events upwards in the hierarchy
• $broadcast – To propagate events downwards in the hierarchy

Lets have a look at how these functions work:

1. $emit

   It dispatches an event upwards through the scope hierarchy. The event life cycle starts at the scope on which “$emit” was called. Afterwards, the event traverses upwards towards the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

   • Creating event “countClickEvent”

     [java]
     var myApp = angular.module(‘myApp’, []);
     myApp.controller(‘TestController’, [‘$scope’, function($scope) {
     $scope.clickCount = 0;
     $scope.$on(‘countClickEvent’, function() {
     $scope.clickCount++;
     });
     }]);
     [/java]

   • Emit event from DOM

     [html]
     <div ng-controller="TestController">
     Root scope click count : {{clickCount}}
     <div ng-controller="TestController">
     <button ng-click="$emit(‘countClickEvent’)">Click to emit event</button>
     <br>
     Middle scope click count : {{clickCount}}

     <div ng-controller="TestController">
     Child scope click count : {{clickCount}}
     </div>
     </div>
     </div>
     [/html]

   In the above example, values of current scope and root scope gets modified but the value of children scope does not change because the “countClickEvent” event (in this case) got broadcasted from current scope and got propagated to the root scope only; and not to the children scope.

2. $broadcast

   It dispatches an event to all the child scopes and their children scopes. The event life cycle starts at the scope on which “$broadcast” was called. All listeners listening for named event on this scope get notified. Afterwards, the event traverses downwards towards the child scopes and calls all registered listeners along the way. The event cannot be canceled.

   • Creating event “countClickEvent”

     [java]
     var myApp = angular.module(‘myApp’, []);
     myApp.controller(‘TestController’, [‘$scope’, function($scope) {
     $scope.clickCount = 0;
     $scope.$on(‘countClickEvent’, function() {
     $scope.clickCount++;
     });
     }]);
     [/java]

   • Broadcast event from DOM

     [html]
     <div ng-controller="TestController">
     Root scope click count : {{clickCount}}
     <div ng-controller="TestController">
     <button ng-click="$broadcast(‘countClickEvent’)">Click to broadcast event</button>
     <br>
     Current scope click count : {{clickCount}}

     <div ng-controller="TestController">
     Child scope click count : {{clickCount}}
     </div>
     </div>
     </div>
     [/html]

   In the above example, values of current scope and child scope gets modified but the value of root scope does not change because the “countClickEvent” event (in this case) got broadcasted from current scope and got propagated to the children scope only; and not to the root scope.

Note: siblings scope are not affected by both functions.

Hope this helps !!!

Read Further on AngularJS Series

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS