Situations may raise that which we needs to call the one controllers function in another controller. Even though we are having lot of other options angular provided us event based call from one controller to another controller it can be achieved by using $broadcast and $emit functions.
As of now in this article I’ll discuss the usage of $broadcast .
$broadcast is a method that which is used to produce or share the method information to downwards. As I said downwards, means the start comes from the controller where we used.
It shares to downwards only to its child or subschilds itself.
$on method is a listener of broadcast event, It listens the particular event that what we needs and access the result from the broadcast event(from other controller).
Lets move to concept with some cases as below :
Case A : Listening the broadcast event propagation by its child controllers.
Case B : Listening the broadcast event propagation by its siblings Controllers(Not possible).
Case C : Making the broadcast event propagation at rootscope level.
As of now in this article I’ll discuss the usage of $broadcast .
$broadcast is a method that which is used to produce or share the method information to downwards. As I said downwards, means the start comes from the controller where we used.
It shares to downwards only to its child or subschilds itself.
$on method is a listener of broadcast event, It listens the particular event that what we needs and access the result from the broadcast event(from other controller).
Lets move to concept with some cases as below :
Case A : Listening the broadcast event propagation by its child controllers.
Case B : Listening the broadcast event propagation by its siblings Controllers(Not possible).
Case C : Making the broadcast event propagation at rootscope level.
Case A : Listening
the broadcast() function by it’s child controllers.
·
In the above image, we are having 3 controllers
named controller1, controler2 and controller3.
·
Controller1 is parent of controller2.
·
Controller2 is parent of controller3.
·
So, Controller1 is the start point of the
propagating event and Controller2 and Controller3 are the listeners of the
event.
·
As controller1 is parent controller, The
$broadcast function definition should be implemented in controller1.
· The implement the listener function that is here $on()
function, should be implented in childs of controller1 i.e, in controller2 and
controller3.
Example on Case A :
Script :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('controller1',
['$scope', function ($scope) {
$scope.departments = [
{ "id": 1, "Dname": "Architect" },
{ "id": 2, "Dname": "Developer" },
{ "id": 3, "Dname": "Tester" },
];
$scope.DeptDetails = function () {
// Broadcasting the $scope.departments.
$scope.$broadcast('GetDepartments', { deptlst:
$scope.departments });
}
}]);
myapp.controller('controller2',
['$scope', function ($scope) {
//Listening the 'GetDepartments' event propagation to
fetch the departments data
$scope.$on("GetDepartments", function (event, data) {
$scope.totdepts1 =
data.deptlst.length;
});
}]);
myapp.controller('controller3',
['$scope', function ($scope) {
//Listening the 'GetDepartments' event propagation to
fetch the departments data
$scope.$on("GetDepartments", function (event, data) {
$scope.totdepts2 =
data.deptlst.length;
});
}]);
</script>
Childs From the script, In controller1 I had defined the data related to departments with $scope.department. I had implemented the $broadcast function named “GetDepartments” within the $scope.DeptDetails() function.
“GetDepartments” is the event that which broadcasts or propagates to all its listeners(childs) here controller2 & controller3.
Controller 2 & controller3 will access that broadcasting event details by using the $on which we can see $on functions in child controllers.
“GetDepartments” is the event that which broadcasts or propagates to all its listeners(childs) here controller2 & controller3.
Controller 2 & controller3 will access that broadcasting event details by using the $on which we can see $on functions in child controllers.
View Code :
<body
ng-app="myapp">
<div ng-controller="controller1">
Controller1 with data.
<table border="1">
<tr ng-repeat="dep in
departments">
<td>{{dep.id}}</td> <td>{{dep.Dname}}</td></tr>
</table>
<div ng-controller="controller2">
<span>Total departments dislaying
in contoller2 : {{ totdepts1 }}</span>
<div ng-controller="controller3">
<span>Total departments dislaying
in contoller3 : {{ totdepts2 }}</span> <br />
<button type="button" id="Button1" ng-click="DeptDetails()">Get dept details from
Controller1</button>
</div>
</div>
</div>
</body>
Result of above code :
Case B :
Listening the broadcast event propagation by its siblings Controllers is not possible.
Even though if we define the $on function to call the $broadcastevent from the siblings. The event can’t get listened.
Listening the broadcast event propagation by its siblings Controllers is not possible.
Even though if we define the $on function to call the $broadcastevent from the siblings. The event can’t get listened.
Case C : Making the broadcast event propagation at rootscope level.
Broadcasting the event by using the $rootscope is differ to above two scenario’s.
In general $rootscope is the parent of the scope, so the $rootscope.$broadcast will be like existence of the event in top level.
In any of the controller if we declare the $root.$broadcast(), Then its work flow will be as follows :
a)It checks all the $rootscope.$on() function event handlers or listeners in the appplication and executes them. In this case the controller can be as parent, child or any.
b)After checking the $rootscope.$on() the $rootscope.$broadcast() will checks for the $scope.$on() in the application and they gets executed.
Reference : Explained this concept in more detailed.
Broadcasting the event by using the $rootscope is differ to above two scenario’s.
In general $rootscope is the parent of the scope, so the $rootscope.$broadcast will be like existence of the event in top level.
In any of the controller if we declare the $root.$broadcast(), Then its work flow will be as follows :
a)It checks all the $rootscope.$on() function event handlers or listeners in the appplication and executes them. In this case the controller can be as parent, child or any.
b)After checking the $rootscope.$on() the $rootscope.$broadcast() will checks for the $scope.$on() in the application and they gets executed.
Reference : Explained this concept in more detailed.
Nice Explanation...
ReplyDeleteThank you..
Deleteexcellent
ReplyDelete