Angular provided us the event based data transfer from one control to another by using $broadcast and $emit. To know about $broadcast usage click the link: using $broadcast and $on .
In this section lets look over the usage of $emit and $on functions.$emit and $on are the functions of the $scope object.
$emit is the one that which propagates the event to upward direction, by using this function we can pass the data to the called one.
In this section lets look over the usage of $emit and $on functions.$emit and $on are the functions of the $scope object.
$emit is the one that which propagates the event to upward direction, by using this function we can pass the data to the called one.
Syntax :
$scope.$emit('eventname', { message: data });
$on function is the one that which receives data from the $emit, its almost like listening the $emit function. In simple, $on receives the data from the $emit function & also access the data from $emit function.
Syntax :
$scope.$on('event', function (event, args) {
$scope.selectdept =
args.message;
});
Note : $emit can’t propagate the event to its non-parent controllers. It can emit only to it’s parent level controllers.
- In the above image we can find two controllers named as controller1 and controller2.
- Controller2 is the child to the controller1.
- As controller2 is the child we can define our $emit in controller2 itself.
- As Controller1 is the parent to the controller2, we can listen the $emit function info by using $on defining in controller1.
Example on $emit and
$on :
Script Code
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('controller1',
['$scope', function ($scope) {
$scope.$on('event', function (event, args) {
$scope.selectdept =
args.message;
});
}]);
myapp.controller('controller2',
['$scope', function ($scope) {
$scope.departments = [
{ "id": 1, "Dname": "Architect" },
{ "id": 2, "Dname": "Developer" },
{ "id": 3, "Dname": "Tester" },
];
$scope.DeptChange = function () {
$scope.$emit('event', { message:
$scope.dept.Dname });
}
}]);
</script>
</script>
Explanation of above code :
In “controller2” I had defined the departments data with id’s and names. These things I’ll bind to the dropdownlist. That we can observe in my view code(below).Within in the same controller i.e. in “controller2” I had defined the $emit function with name “event”. The purpose o this event is it provides the dropdownlist selected department who ever called(parent controllers) by using $on. In “controller1” simply I’m trying to access the $emit’s propagated event data by using $on.
In “controller2” I had defined the departments data with id’s and names. These things I’ll bind to the dropdownlist. That we can observe in my view code(below).Within in the same controller i.e. in “controller2” I had defined the $emit function with name “event”. The purpose o this event is it provides the dropdownlist selected department who ever called(parent controllers) by using $on. In “controller1” simply I’m trying to access the $emit’s propagated event data by using $on.
View Code :
<body
ng-app="myapp">
<div ng-controller="controller1">
In parent controller : You have selected
{{selectdept}}
<div ng-controller="controller2">
Child Controller :
<select ng-model="dept"
ng-change="DeptChange()"
ng-options="x.Dname for x in departments track by
x.id">
<option value="">--select--</option>
</select>
</div>
</div>
</body>
In the above view code, we can observe “controller1” is in parent div and “controller2” in child div. Within the child div we are having the dropdownlist code by select tag and on its ng-change we are calling a function “DeptChnage()” which was initialized at controller2 in script code. On the change or selection of department from the dropdownlist, the selected item will be displayed in controller1 within the model “selectdept” through the “$on” function.
Result :
An important thing is that, we have to remember that the propagation goes from itself(controller where we implemented $emit) to upwards to all its parents.
The above statement mean that it proagates the event up to the $rootscope level as we knew that $rootscope is the parent to all the $scope members.
The above statement mean that it proagates the event up to the $rootscope level as we knew that $rootscope is the parent to all the $scope members.
Once the searching of $on in its parent controllers as it reaches to the top most parent i.e. $rootscope, It checks for the $rootscope.$on in the whole application, without any kind of parent child relation it will execute that part. This will be very much useful while retrieving data from other controller without any kind of limitations.
Syntax for $rootscope & $on :
$rootscope.$on('event', function (event, args) {
$scope.selectdept =
args.message;
});
Retrieving, This piece of code wherever in the application that gets executed when the $emit reaches to the $rootscope level.
No comments:
Post a Comment