Intercommunication and eventing :- $brodcast and $emit falls under intercommunication between controllers. There are other ways also like having data in parent and root controller and one other way is getting data from service. $on is unitized for event registering on scopes. Broadcast is like jms broadcasting it will send a copy to everyone. Emit will send it only to its parents its something like inheritance in java. Please have a look at below program and output to understand it clearly.
Example :-
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
"use strict";
var allScopes = {};
var angModule = angular.module("app",[]);
function globalController(ctrlName){
return function($scope){
console.log("entering controller");
//Registering event on individual scope
$scope.$on("customMessage",function(e,opt){
console.log("Controller :-"+ ctrlName + " recievedMessage "+opt.message);
})
allScopes[ctrlName]=$scope;
};
}
angModule.controller("tcmController",globalController("tcmController"))
.controller("projectController",globalController("projectController"))
.controller("defectsController",globalController("defectsController"))
.controller("jiraController",globalController("jiraController"))
.controller("rtcController",globalController("rtcController"))
.run(function($timeout,$rootScope){
console.log("entering run");
//Registering event on global scope
$rootScope.$on("customMessage",function(e,opt){
console.log("root Controller recievedMessage "+opt.message);
});
allScopes["root"]= $rootScope;
$timeout(function(){
console.log("entering timeout");
//broadcast will communicate to everyone in the scope
$rootScope.$broadcast("customMessage",{
message : 'broadcasting from root'
});
//emit will communicate to everyone in the inheritance heiracrhy scope
allScopes["projectController"].$broadcast("customMessage",{
message : 'broadcasting from root'
});
//To see the result run them individually by commenting them out
},1000);
});
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="tcmController">
<div ng-controller="projectController">
</div>
<div ng-controller="defectsController">
</div>
</div>
<div ng-controller="jiraController">
</div>
<div ng-controller="rtcController">
</div>
</div>
</body>
</html>
Output for $emit :-
Controller :-projectController recievedMessage broadcasting from root
Controller :-tcmController recievedMessage broadcasting from root
root Controller recievedMessage broadcasting from root
Output for $broadcast:-
root Controller recievedMessage broadcasting from root
Controller :-tcmController recievedMessage broadcasting from root
Controller :-projectController recievedMessage broadcasting from root
Controller :-defectsController recievedMessage broadcasting from root
Controller :-jiraController recievedMessage broadcasting from root
Controller :-rtcController recievedMessage broadcasting from root
Example :-
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
"use strict";
var allScopes = {};
var angModule = angular.module("app",[]);
function globalController(ctrlName){
return function($scope){
console.log("entering controller");
//Registering event on individual scope
$scope.$on("customMessage",function(e,opt){
console.log("Controller :-"+ ctrlName + " recievedMessage "+opt.message);
})
allScopes[ctrlName]=$scope;
};
}
angModule.controller("tcmController",globalController("tcmController"))
.controller("projectController",globalController("projectController"))
.controller("defectsController",globalController("defectsController"))
.controller("jiraController",globalController("jiraController"))
.controller("rtcController",globalController("rtcController"))
.run(function($timeout,$rootScope){
console.log("entering run");
//Registering event on global scope
$rootScope.$on("customMessage",function(e,opt){
console.log("root Controller recievedMessage "+opt.message);
});
allScopes["root"]= $rootScope;
$timeout(function(){
console.log("entering timeout");
//broadcast will communicate to everyone in the scope
$rootScope.$broadcast("customMessage",{
message : 'broadcasting from root'
});
//emit will communicate to everyone in the inheritance heiracrhy scope
allScopes["projectController"].$broadcast("customMessage",{
message : 'broadcasting from root'
});
//To see the result run them individually by commenting them out
},1000);
});
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="tcmController">
<div ng-controller="projectController">
</div>
<div ng-controller="defectsController">
</div>
</div>
<div ng-controller="jiraController">
</div>
<div ng-controller="rtcController">
</div>
</div>
</body>
</html>
Output for $emit :-
Controller :-projectController recievedMessage broadcasting from root
Controller :-tcmController recievedMessage broadcasting from root
root Controller recievedMessage broadcasting from root
Output for $broadcast:-
root Controller recievedMessage broadcasting from root
Controller :-tcmController recievedMessage broadcasting from root
Controller :-projectController recievedMessage broadcasting from root
Controller :-defectsController recievedMessage broadcasting from root
Controller :-jiraController recievedMessage broadcasting from root
Controller :-rtcController recievedMessage broadcasting from root
