Riaxe Systems | Blog
Riaxe.com

May
28th
Understanding Angular’s $scope and $rootscope event system $emit , $broadcast and $on
Author :Alex Parker

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers. $rootScope.$emit :- only lets other $rootScope listeners to catch it. This is good to use when you don’t want every scope to listen it. Most high level communication have been done using this event. $scope.$emit is when you want that $scope and all […]

Date : May 28, 2017
No Comments

Understanding Angular’s $scope and $rootscope event system $emit , $broadcast and $on

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.

click here $rootScope.$emit :- only lets other $rootScope listeners to catch it. This is good to use when you don’t want every scope to listen it. Most high level communication have been done using this event.

$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. For example a child asking to their parents at home (but kids of neighbours can’t listen there talks).

Masters Online No Thesis Education Educator Educators $rootScope.$broadcast– It dispatches an event name downwards to all child scopes (and their children) and notifies to the registered $rootScope.Scope listeners. The event life cycle starts when $broadcast was called. All the listeners get notified and it goes downwards towards all childscopes and call all registered listeners. Parent is announcing a small outing on a specific day.

http://masheroa.com/writing-an-admission-essay-about-myself/ $scope.$broadcast is for the $scope itself and its children. The childrens are whispering among themselves so that their talk can’t reach their parents.

$on:– It listens to the event dispatched by $broadcast and $emit by the event name.

Hey guys, to make you better understand this angular event management system, I will give an example of parent and child controller.

A good way to visualise this example is through hierarchy of controller in HTML. In the example given below the Son and Daughter are children of Parent controller.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

<script type=”text/javascript” src=”angular.min.js”></script>

<script type=”text/javascript” src=”angularEvents.js”></script>

</head>

<body>

<div ng-app=”angularEventApp”>

   <div ng-controller=”parentController”>

    <div>

           <strong ng-click=”parentToChildren()”>{{name}}</strong>

           <input  ng-model=”parentMessage” />{{childMessage}}

           <button ng-click=”talkToAll()”>Send To All</button>

    <button ng-click=”talkToSon()”>Send To Son</button>

    <button ng-click=”talkTodaughter()”>Send To Daughter</button>

           <textarea ng-model=”parentArea”></textarea>

    </div>

    <div ng-controller=”sonController”>

    <strong >{{name}}</strong>

    <input ng-model=”sonMessage” />{{childMessage}}

    <button ng-click=”talkToParent()”>Send To Parent</button>

    <button ng-click=”talkToSister()”>Send To Sister</button>

    <textarea ng-model=”sonArea”></textarea>

</div>

<div ng-controller=”daughterController”>

    <strong ng-click=”tellParents()”> {{name}}</strong>

<input ng-hide=”childMessage” ng-model=”daughterMessage” />{{childMessage}}

<button ng-click=”talkToParent()”>Send To Parent</button>

    <button ng-click=”talkToBrother()”>Send To Brother</button>

    <textarea ng-model=”daughterArea”></textarea>

</div>

   </div>

</div>

</body>

</html>

Here the basic angular js code :

go site Here ParentController, sonController and daughterController are defined.

step1

Here is the sample code for parentController

step2

source url Here is the sample code for sonController

step3

source Here is the sample code for daughterController

step4

In parent controller three functions are defined i.e talkToAll ,talkToSon,talkTodaughter .
Parent can communicate to any child controller or to all child controller. So in talkToAll() method of parent controller send the message to all the child controller using $scope.$broadcast event. Check below figure to the understand how event listen by child controller.

The parent controller will broadcast an event, and the children will listen for it.

step5

Using emit send an event upwards the chain:

The child can talk to the parent in a similar way like using $emit instead of $broadcast.
The event from child controller can be listen by parent controller using $scope.on . The son controller emit an event and parent contoller can listen like this.

step6

Using $rootScope.$emit to communicate to child controller:

The child can talk to another child using $rootscope instead of $scope. The event can be lister by child controller by $rooscope.$on. Check the below example how Son Controller and daughter controller can communicate to each other.

Children communicate through the parent:

children cannot directly communicate through events, as their scope’s are not linked. However, children do have access to their parent’s scope, so it is possible to hijack and broadcast an event from there.

This is done by calling $scope.$parent.$broadcast. Any of the siblings – and the parent, can listen to this event.

step7

Here is a sample Gif image which shows the complete output.

eventInangularNew

Find the complete code here.

https://jsfiddle.net/biswajit_rout/5hbfeddj/1/


Article by: Biswajit Rout
Team Lead

Linkedin | Stackoverflow

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *


*