Scope Event propagation in AngularJS

01 / Jun / 2015 by Dhanendra Kumar 0 comments

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”

      var myApp = angular.module('myApp', []);
      	myApp.controller('TestController', ['$scope', function($scope) {
      		$scope.clickCount = 0;
      		$scope.$on('countClickEvent', function() {
      			$scope.clickCount++;
      		});
      }]);
      
    • Emit event from DOM

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

    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”

      var myApp = angular.module('myApp', []);
      	myApp.controller('TestController', ['$scope', function($scope) {
      		$scope.clickCount = 0;
      		$scope.$on('countClickEvent', function() {
      			$scope.clickCount++;
      		});
      }]);
      
    • Broadcast event from DOM

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

    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.

  3. Note: siblings scope are not affected by both functions.

    Hope this helps !!!

FOUND THIS USEFUL? SHARE IT

Leave a comment -