<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<div>Controller1</div>
Event: {{event}}
<br/>
<input type='button' ng-click='update();' value='Emit Event' />
<input type='button' ng-click='update2();' value='Broadcast Event' />
<br/>
<div ng-controller='ChildCtrl'>
<div>Child Controller</div>
Event: {{event}}
<br/>
<input type='button' ng-click='update();' value='Emit Event' />
<input type='button' ng-click='update2();' value='Broadcase Event' />
</div>
</div>
</div>
</body>var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope',
function ($scope) {
$scope.name = 'Ctrl1';
$scope.update = function(){
$scope.$emit('emit_event');
}
$scope.update2 = function(){
$scope.$broadcast('broadcast_event');
}
$scope.$on('emit_event',function(event){
$scope.event = 'emit event from ' + event.targetScope.name
})
$scope.$on('broadcast_event',function(event){
$scope.event = 'broadcast event from ' + event.targetScope.name
})
}
]);
mainMod.controller('ChildCtrl',function($scope){
$scope.name = 'Ctrl2';
$scope.update = function(){
$scope.$emit('emit_event');
}
$scope.update2 = function(){
$scope.$broadcast('broadcast_event');
}
$scope.$on('emit_event',function(event){
$scope.event = 'emit event from ' + event.targetScope.name
})
$scope.$on('broadcast_event',function(event){
$scope.event = 'broadcast event from ' + event.targetScope.name
})
});
External CSS
This Pen doesn't use any external CSS resources.