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.
No comments:
Post a Comment