Angular Js Example for – RootScope,Scope,broadcast and Emit concept
The rootScope:
<h1>{{name}}</h1>
<button> Root BroadCasting</button>
<div style=”border: 1px solid blue; margin: 5px; padding: 5px;”>
The first Controller
<h1>{{name}}</h1>
<button> First Emit</button>
<button> First BroadCast</button>
<div style=”border: 1px solid blue; margin: 5px; padding: 5px;”>
The firstNestedController Controller
<h1>{{name}}</h1>
<button> First Nested Emit</button>
</div>
</div>
<div style=”border: 1px solid blue; margin: 5px; padding: 5px;”>
The secondController Controller
<h1>{{name}}</h1>
</div>
The rootScope:
<h1>{{name}}</h1>
<script>
var app = angular.module(‘myApp’, []);
app.run(function($rootScope) {
// $rootScope.name = ‘Pavan’;
$rootScope.$on(“FirstControllerEvent”,function(e,data){
alert(“FirstController – Alert -Root”);
});
$rootScope.$on(“FirstNestedControllerEvent”,function(e,data){
alert(“FirstNestedController – Alert-Root”);
});
$rootScope.$on(“FirstController_BroadCast_Event”,function(e,data){
alert(“FirstController_BroadCast_Event – Alert-Root”);
});
$rootScope.doBroadCast=function(){
$rootScope.$broadcast(“RootBroadCastEvent”);
}
$rootScope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-Root”);
});
});
app.controller(‘secondController’, function($scope,$rootScope) {
$scope.name = “Second Pankaj”;
$rootScope.name = ‘Second Pallavi’;
$rootScope.$on(“FirstNestedControllerEvent”,function(e,data){
alert(“FirstNestedController – Alert-Root-SecondController”);
});
$scope.$on(“FirstController_BroadCast_Event”,function(e,data){
alert(“FirstController_BroadCast_Event – Alert-secondcontroller”);
});
$rootScope.$on(“FirstController_BroadCast_Event”,function(e,data){
alert(“FirstController_BroadCast_Event – Alert-Root-secondcontroller”);
});
$rootScope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-SecondController-root”);
});
$scope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-secondController”);
});
});
app.controller(‘firstController’, function($scope,$rootScope) {
$scope.name = “First Pankaj”;
$rootScope.name = ‘First Pallavi’;
$scope.doEmit1=function(){
$scope.$emit(“FirstControllerEvent”);
}
$scope.doBroadCast1=function(){
$scope.$broadcast(“FirstController_BroadCast_Event”);
}
$scope.$on(“FirstControllerEvent”,function(e,data){
alert(“FirstController – Alert-firstController”);
});
$scope.$on(“FirstNestedControllerEvent”,function(e,data){
alert(“FirstNestedController – Alert-firstController”);
});
$scope.$on(“FirstController_BroadCast_Event”,function(e,data){
alert(“FirstController_BroadCast_Event – Alert-firstController”);
});
$rootScope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-firstController-root”);
});
$scope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-firstController”);
});
});
app.controller(‘firstNestedController’, function($scope,$rootScope) {
$scope.name = ” First Nested Pankaj”;
$scope.$on(“FirstControllerEvent”,function(e,data){
alert(“FirstController – Alert-firstNestedController”);
});
$scope.doEmit11=function(){
$scope.$emit(“FirstNestedControllerEvent”);
}
$scope.$on(“FirstNestedControllerEvent”,function(e,data){
alert(“FirstNestedController – Alert-firstNestedController”);
});
$scope.$on(“FirstController_BroadCast_Event”,function(e,data){
alert(“FirstController_BroadCast_Event – Alert-firstNestedController”);
});
$rootScope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-firstNestedController-root”);
});
$scope.$on(“RootBroadCastEvent”,function(e,data){
alert(“RootBroadCastEvent – Alert-firstNestedController”);
});
});
</script>
