In this post we are going to see the flow of events in $emit and $broadcast events in angular js. Generally $broadcast is used to sent the events from top to bottom of the $scope tree, $emit means sending the events from bottom of the tree to the top.
from the above you can understand how the events are travelling in a scope tree.now we can see the sample now to trigger the events in the scope.
First Let we see about the $broadcast
Now we are going to create a controller which is maps as sibling to the main controller in DOM
Now we are going to create a controller which is maps as child to the main controller in DOM
In the above example main is the main controller which have a separate scope, then passing the child as a inner controller for the main, and sibling is the sibling controller.
Now in this view we have a two text box in which we are giving the two values , where it is passed as a parameter to the function called change Name when the button is clicked which is named as "Change Nam"
Here from the main controller, we are broadcasting a method name 'RecieveNotify', from the $scope and $rootScope, why we are broadcast from two different scopes, Because if it is broadcast from $scope, it can traverse to child controller, but not to sibling controller, to broadcast the event to siblings whether we have to broadcast from parent scope or from $rootScope. If we broadcast from $rootScope then it reaches all levels scopes.
Here child method is called twice because we are trigger from a $rootScope and $scope.
Output:
****************
Child : Names changes from Rajesh to Krishna
Child : Names changes from Rajesh to Krishna
Sibling : Names changes from Rajesh to Krishna
Now Let we see about $emit
$emit is an Bottom to Top approach ,i.e from Child to Parent scope.. Let we see the sample now.
OUTPUT:
**************
Parent recieves value from child SDF
From this post you can learn how to $emit and $broadcast events in angular js.
from the above you can understand how the events are travelling in a scope tree.now we can see the sample now to trigger the events in the scope.
First Let we see about the $broadcast
var app = angular.module('app', []);
app.controller('main', function ($scope,$rootScope) {
$scope.Title = "Sample Angular Application";
$scope.changeName = function (newname, oldname) {
$scope.$broadcast('RecieveNotify', newname, oldname);
/* To broadcast to sibling we have to use the $rootScope , because sibling is
Comes under a parent scope of current scope, parent scope is now $rootScope
*/
$rootScope.$broadcast('RecieveNotify', newname, oldname);
};
});
app.controller('sibling', function ($scope) {
$scope.$on('RecieveNotify', function (evt, newname, oldname) {
console.log('Sibling : Names changes from ' + oldname + ' to ' + newname);
});
});
app.controller('child', function ($scope) {
$scope.$on('RecieveNotify', function (evt, newname, oldname) {
console.log('Child : Names changes from ' + oldname + ' to ' + newname);
});
});
<html>
<head>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="main">
<h1>{{Title}}</h1>
Old Name : <input type="text" ng-model="OName" />
New Name :<input type="text" ng-model="NName" />
<input type="button" ng-click="changeName(NName,OName)" value="Change Name" />
<div ng-controller="child">
</div>
</div>
<div ng-controller="sibling">
</div>
</div>
</body>
</html>
Now in this view we have a two text box in which we are giving the two values , where it is passed as a parameter to the function called change Name when the button is clicked which is named as "Change Nam"
Here from the main controller, we are broadcasting a method name 'RecieveNotify', from the $scope and $rootScope, why we are broadcast from two different scopes, Because if it is broadcast from $scope, it can traverse to child controller, but not to sibling controller, to broadcast the event to siblings whether we have to broadcast from parent scope or from $rootScope. If we broadcast from $rootScope then it reaches all levels scopes.
Here child method is called twice because we are trigger from a $rootScope and $scope.
Output:
****************
Child : Names changes from Rajesh to Krishna
Child : Names changes from Rajesh to Krishna
Sibling : Names changes from Rajesh to Krishna
Now Let we see about $emit
$emit is an Bottom to Top approach ,i.e from Child to Parent scope.. Let we see the sample now.
app.controller('main', function ($scope, $rootScope) {
$scope.Title = "Sample Angular Application";
$scope.changeName = function (newname, oldname) {
$scope.$broadcast('RecieveNotify', newname, oldname);
/* To broadcast to sibling we have to use the $rootScope , because sibling is comes
under a parent scope of current scope, parent scope is now $rootScope
*/
$rootScope.$broadcast('RecieveNotify', newname, oldname);
};
$scope.$on('RecievefromChild', function (evt, data) {
console.log('Parent recieves value from child ' + data);
});
});
app.controller('child', function ($scope) {
$scope.$on('RecieveNotify', function (evt, newname, oldname) {
console.log('Child : Names changes from ' + oldname + ' to ' + newname);
});
$scope.CallParent = function (parentvalue) {
$scope.$emit('RecievefromChild', parentvalue);
};
});
Parent Value :<input type="text" ng-model="Pvalue" />
<input type="button" ng-click="CallParent(Pvalue)" value="Call Parent" />
OUTPUT:
**************
Parent recieves value from child SDF
From this post you can learn how to $emit and $broadcast events in angular js.
ReplyDeleteYour new valuable key points imply much a person like me and extremely more to my office workers. With thanks from every one of us.
Best AWS Training in Chennai | Amazon Web Services Training in Chennai
AWS Training in Bangalore | Amazon Web Services Training in Bangalore
Amazon Web Services Training in Pune | Best AWS Training in Pune
All the points you described so beautiful. Every time i read your i blog and i am so surprised that how you can write so well.
ReplyDeleteangularjs Training in chennai
angularjs Training in chennai
angularjs-Training in tambaram
angularjs-Training in sholinganallur
angularjs-Training in velachery
python training in pune | python training institute in chennai | python training in Bangalore
ReplyDeleteThis is a terrific article, and that I would really like additional info if you have got any. I’m fascinated with this subject and your post has been one among the simplest I actually have read.
ReplyDeleteMicrosoft Azure online training
Selenium online training
Java online training
Python online training
uipath online training
ReplyDeleteNice blog! Thanks for sharing this valuable information
German Classes in Bangalore
German Language Course in Hyderabad
This post is so interactive and informative.keep update more information...
ReplyDeleteSEO Training in Tambaram
SEO Training in ChennaiS
Great post. Thanks for sharing such a useful blog.
ReplyDeleteDevOps Training in Velachery
DevOps Training in Chennai
Great post. keep sharing such a worthy information.
ReplyDeleteTally Course in Chennai
Online Tally Course
slot siteleri
ReplyDeletekralbet
betpark
tipobet
betmatik
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
TCÄ°
slot siteleri
ReplyDeletekralbet
betpark
tipobet
betmatik
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
AH4PJ