The $rootScope.$broadcast is used to broadcast a “global” event that can be caught by any listener of that particular scope. The descendant scopes can catch and handle this event by using $scope.$on.
Syntax:
$rootScope.$broadcast(name, args) $scope.$on(name, listener);
Parameter value:
- listener: It is used to specify the function to call when the event is caught.
Approach:
- Create a ParentController from which you would want to raise/broadcast an event.
- Use $rootScope.$broadcast in AngularJS to broadcast the event from the ParentController.
- Create a ChildController or an ExternalController (i.e., not a direct descendant of the ParentController) to catch and handle the event.
- Use $scope.$on in AngularJS to catch the respective event.
Example: This example uses $rootScope.$broadcast to raise an event.
HTML
<!DOCTYPE html> < html >
< head >
< script src =
</ script >
< script type = "text/javascript" >
var app = angular.module('app', []);
app.controller('ParentController', function (
$rootScope, $scope) {
$scope.broadcastMessage = function () {
$rootScope.$broadcast('newEvent', {
message: $scope.parentMessage
});
};
});
app.controller('ChildController', function ($scope) {
$scope.$on('newEvent', function (event, args) {
$scope.message = args.message;
});
});
app.controller('ExternalController', function ($scope) {
$scope.$on('newEvent', function (event, args) {
$scope.message = args.message;
});
});
</ script >
< style type = "text/css" >
h1, h2,
code {
color: green;
}
p {
color: green;
display: inline-block;
}
div {
border-color: black;
border-style: solid;
padding: 10px;
}
</ style >
</ head >
< body ng-app = "app" >
< h1 >GeeksforGeeks</ h1 >
< h3 >AngularJS $rootScope.$broadcast</ h3 >
< div ng-controller = "ParentController" >
< h1 >Parent Controller</ h1 >
< input ng-model = "parentMessage" >
< button ng-click = "broadcastMessage()" >
Broadcast Message
</ button >
< br >< br >
< div ng-controller = "ChildController" >
< h2 >Child Controller</ h2 >
< p >Message :</ p >
< code >{{message}}</ code >
</ div >
</ div >< br >< br >
< div ng-controller = "ExternalController" >
< h1 >External Controller</ h1 >
< p >Message :</ p >
< code >{{message}}</ code >
</ div >
</ body >
</ html >
|
Output: