Post
Ask Question

Start With AngularJS: Part 9

Thank you for reading my previous articles on AngularJS. If you have not read them, then study from the following links. After reading them it will be easier to understand today’s topics.

$broadcast

Sends an event from the current scope down to all of the child scopes. The arguments are the name of the event and an object used to provide supplementary data with the event.

  1. $rootScope. Broadcast ("Address code", {  
  2.    type: type, Address code: Address  
  3. });  
broadcast
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.     <head>  
  5.         <title>BroadCast</title>  
  6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.             </script>  
  8.             <script>  
  9.             var app = angular.module("app", []);  
  10.             app.controller("ctrl1", function ($scope)  
  11.             {  
  12.                 $scope.$on("broadcast", function (event, arg)  
  13.                 {  
  14.                     $scope.Message = arg.Message;  
  15.                 });  
  16.             });  
  17.             app.controller("childctrl", function ($scope)  
  18.             {  
  19.                 $scope.Broadcasting = function (msg)  
  20.                 {  
  21.                     $scope.$broadcast("broadcast",  
  22.                     {  
  23.                         Message: msg  
  24.                     });  
  25.                 }  
  26.             });  
  27.             app.controller("grandchildctrl", function ($scope)  
  28.             {  
  29.                 $scope.$on("broadcast", function (event, arg)  
  30.                 {  
  31.                     $scope.gMessage = arg.Message;  
  32.                 });  
  33.             });  
  34.             app.controller("ctrl2", function ($scope)  
  35.             {  
  36.                 $scope.$on("broadcast", function (event, arg)  
  37.                 {  
  38.                     $scope.Message = arg.Message;  
  39.                 });  
  40.             });  
  41.             </script>  
  42.     </head>  
  43.     <body ng-app="app">  
  44.     <div ng-controller="ctrl1" style="padding:5px; border:1pxsolidred"> Parent: {{Message}}  
  45.         <br/>  
  46.         <div ng-controller="childctrl" style="padding:5px; border:1pxsolidgreen">  
  47.             <input type="text" ng-model="Name" />   
  48.                   
  49.             <input type="button" value="Broadcast" ng-click="Broadcasting(Name)" />  
  50.             <br/>  
  51.             <br/>  
  52.             <div ng-controller="grandchildctrl" style="padding:5px; border:1pxsolidpink"> Grand Child: {{gMessage}}   
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56.     <br/>  
  57.     <div ng-controller="ctrl2" style="padding:5px; border:1pxsolidblue"> Sibling: {{gMessage}}   
  58.     </div>  
  59. </body>#ff0000</html>  
Output

run program

$emit: Sends an event from the current scope up to the root scope.
  1. Scope. $emit ('Address', message: msg);  
emit
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.     <head>  
  5.         <title>Emit</title>  
  6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.             </script>  
  8.             <script>  
  9.             var app = angular.module("app", []);  
  10.             app.controller("ctrl1", function ($scope)  
  11.             {  
  12.                 $scope.$on("emit", function (event, arg)  
  13.                 {  
  14.                     $scope.Message = arg.Message;  
  15.                 });  
  16.             });  
  17.             app.controller("childctrl", function ($scope)  
  18.             {  
  19.                 $scope.emittion = function (msg)  
  20.                 {  
  21.                     $scope.$emit("emit",  
  22.                     {  
  23.                         Message: msg  
  24.                     });  
  25.                 }  
  26.             });  
  27.             app.controller("grandchildctrl", function ($scope)  
  28.             {  
  29.                 $scope.$on("emit", function (event, arg)  
  30.                 {  
  31.                     $scope.gMessage = arg.Message;  
  32.                 });  
  33.             });  
  34.             app.controller("ctrl2", function ($scope)  
  35.             {  
  36.                 $scope.$on("emit", function (event, arg)  
  37.                 {  
  38.                     $scope.Message = arg.Message;  
  39.                 });  
  40.             });  
  41.             </script>  
  42.     </head>  
  43.     <body ng-app="app">  
  44.     <div ng-controller="ctrl1" style="padding:5px; border:1pxsolidred"> Parent: {{Message}}  
  45.         <br/>  
  46.         <div ng-controller="childctrl" style="padding:5px; border:1pxsolidgreen">  
  47.             <input type="text" ng-model="Name" />   
  48.                   
  49.             <input type="button" value="Emit" ng-click="emittion(Name)" />  
  50.             <br/>  
  51.             <br/>  
  52.             <div ng-controller="grandchildctrl" style="padding:5px; border:1pxsolidpink"> Grand Child: {{gMessage}}   
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56.     <br/>  
  57.     <div ng-controller="ctrl2" style="padding:5px; border:1pxsolidblue"> Sibling: {{gMessage}}   
  58.     </div>  
  59. </body>undefined  
  60.       
  61. </html>  
Output

Output

$on: Registers a handler function that is invoked when the specified event is received by the scope.
  1. $scope. On ("Address", function (event, args) {  
  2.    $scope [args. Type] = args.Adress;  
  3. });  
run

I hope you have learned about $on, $emit, and $broadcast.
 
Read more articles on AngularJS:


Similar Articles