var app = angular.module('MainCtrl', []);
app.controller('controller1',['$scope','$rootScope',function($scope,$rootScope){
$scope.rootBroadcast = function() {
$rootScope.$broadcast('Tree1Event','$rootScope.$broadcast');
};
$scope.rootEmit = function() {
$rootScope.$emit('Tree1Event','$rootScope.$emit');
};
}])
.controller('GrandParent1',['$scope','$rootScope',function($scope,$rootScope){
$scope.GrandParent1Var = '';
//Listening the Tree 1 Child Event
$scope.$on('T1childEmitEvent',function(e,arg){
console.log("Hello");
$scope.T1EventVar = arg;
});
// Listening to Tree 2 Grand Parent Event
$scope.$on('Tree1Event',function(e,arg){
$scope.T1EventVar = arg;
});
$scope.broadCastEvent=function(){
console.log("broadCastEvent");
$scope.$broadcast('Tree1Event','T1 Grand Parent Brodacated');
};
$scope.emitEvent=function(){
$scope.$emit('Tree1Event','T1 Grand Parent Emitted');
};
}])
.controller('T1Parent',['$scope',function($scope){
$scope.T1EventVar = '';
$scope.stopPropagation=false;
$scope.$on('Tree1Event',function(e,arg){
console.log("T1EventVar");
$scope.T1EventVar = arg;
// stop propagation
if($scope.stopPropagation) {
e.stopPropagation();
}
});
$scope.broadCastEvent=function(){
$scope.$broadcast('Tree1Event','T1 Parent Brodacated');
};
$scope.emitEvent=function(){
$scope.$emit('Tree1Event','T1 Parent Emitted');
};
}])
.controller('T1Child',['$scope','$rootScope',function($scope,$rootScope){
$scope.T1EventVar = '';
$scope.T1EventVarFromRoot = '';
$scope.$on('Tree1Event',function(e,arg){
console.log(e);
$scope.T1EventVar = arg;
});
$scope.emitEvent = function() {
$scope.$emit('Tree1Event','T1 Child Emitted');
};
$scope.broadCastEvent=function(){
$scope.$broadcast('Tree1Event','T1 Child Brodacated');
//$rootScope.$broadcast('Tree1Event','$rootScope.$broadcast');
};
$rootScope.$on('Tree1Event', function(e,arg){
$scope.T1EventVar = arg;
});
}])
.controller('GrandParent2',['$scope',function($scope){
$scope.T1EventVar = '';
//Listening the Tree 1 Child Event
$scope.$on('Tree1Event',function(e,arg){
$scope.T1EventVar = arg;
});
$scope.broadCastEvent=function(){
$scope.$broadcast('Tree1Event','T2 Grand Parent Brodacated');
};
$scope.emitEvent=function(){
$scope.$emit('Tree1Event','T2 Grand Parent Emitted');
};
}])
.controller('T2Parent',['$scope',function($scope){
$scope.T1EventVar = '';
$scope.$on('Tree1Event',function(e,arg){
$scope.T1EventVar = arg;
});
$scope.emitEvent = function() {
$scope.$emit('Tree1Event','T2 Parent Emitted');
};
$scope.broadCastEvent=function(){
$scope.$broadcast('Tree1Event','T2 Parent Brodacated');
};
}])
.controller('T2Child',['$scope',function($scope){
$scope.T1EventVar = '';
$scope.$on('Tree1Event',function(e,arg){
$scope.T1EventVar = arg;
});
$scope.emitEvent = function() {
$scope.$emit('Tree1Event','T2 Child Emitted');
};
$scope.broadCastEvent=function(){
$scope.$broadcast('Tree1Event','T2 Child Brodacated');
};
}]);
<!DOCTYPE html>
<html ng-app="MainCtrl">
<head>
<meta charset="utf-8" />
<title>Event based communication between controllers</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table class="table">
<tr ng-controller="controller1">
<td colspan="2">
<button ng-click="rootBroadcast()">$rootScope.$broadcast</button>
<button ng-click="rootEmit()">$rootScope.$emit</button>
</td>
</tr>
<tr>
<td ng-controller="GrandParent1" class="success">
<table class="table" class="success">
<tr class="success">
<td >
<h2>Tree 1 : Grand parant</h2>
<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="info">
<table class="table" ng-controller="T1Parent">
<tr>
<td class="info">
<h2 >Tree 1 : Parent</h2>
<div><input type="checkbox" ng-model="stopPropagation"> Stop Propagation</div>
<div><input type="checkbox" ng-model="stopBroadcast"> Deregister this controller from listening</div>
<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="danger">
<h2>Tree 1 : Grand Child</h2>
<table class="table" ng-controller="T1Child">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- tree 2 starts -->
<td ng-controller="GrandParent2" class="success">
<table class="table" class="success" >
<tr class="success">
<td >
<h2>Tree 2 : Grand parant</h2>
<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="info">
<table class="table" ng-controller="T2Parent">
<tr>
<td class="info">
<h2 >Tree 2 : Parent</h2>
<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="danger">
<h2>Tree 2 : Grand Child</h2>
<table class="table" ng-controller="T2Child">
<thead>
<tr>
<th>Event</th>
<th>Event</th>
<th>Listener1</th>
</tr>
</thead>
<tbody>
<tr>
<td><button ng-click="broadCastEvent()">Broadcast
</button></td>
<td><button ng-click="emitEvent()">Emit</button></td>
<td>{{T1EventVar}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
/* Put your css in here */