AngularJS $scope.$broadcast() Function

The AngularJS $broadcast method is used to dispatches an event name downward to all child scopes notify the registered $rootScope listeners. The $broadcast propagates event name downward and travel toward the child scopes and calls all registered listeners along the way. All listeners for event name on this scope get notified. In $broadcast, event cannot be cancelled.

The difference between $emit and $broadcast method is, the way they propagate or travelled from the source.

Syntax

$broadcast(name, args);

AngularJS $scope.$broadcast() Function Example

<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->         
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>         
    <meta charset="utf-8">        
    <title>AngularJS $broadcast with $on Example</title>        
  <script>        
var app = angular.module('app', []);        
    app.controller("ParentController", function ($scope) {
       $scope.handleClick = function (msg) {
         $scope.$broadcast('event', { message: msg });
       };
    });
    app.controller("ChildController", function ($scope) {
     $scope.$on('event', function (event, args) {
         $scope.message = 'In Child Controller: ' + args.message;
       });
    });
    app.controller("ChildsChildController", function ($scope) {
     $scope.$on('event', function (event, args) {
         $scope.message = 'In Childs Child Controller: ' + args.message;
       });
    });
</script>        
</head>        
<body style="background-color:#DDE4E9;">        
  <fieldset style="background-color:#DDE4E9;">                    
    <legend>AngulerJS $broadcast with $on method Example</legend>         
  <div ng-app="app"> 
    <div ng-controller="ParentController"> 
      <input ng-model="msg">
      <button ng-click="handleClick(msg);">$broadcast</button>
    <div ng-controller="ChildController"> 
		<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{message}}
		  </p>
      </div>
      <div ng-controller="ChildsChildController"> 
		<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{message}}
		  </p>
      </div>
</div>        
</div>        
 </fieldset>         
</body>        
</html>

See Live Example

« Previous