Broadcast/Emit (angular 0.10.6)

http://angularjs.org/

by dandoyon

HTML

<!doctype>
<html xmlns:ng="http://angularjs.org" xmlns:ui="http://angularjs.org/ui" ng:app>
<head>
    <title>Test</title>
    <script src="http://www.dandoyon.com/angular/angular.min.js"></script>
</head>
<body>

<div ng:controller="CtrlTop">
          <h1>Top</h1>
          <p>{{top}}</p>
          <p>{{top_args}}</p>
      <div ng:controller="CtrlMiddle">
      <h2>Middle</h2>
       <button ng:click="emitter()">Emit</button>
       <button ng:click="broadcast()">Broadcast</button>
        <div ng:controller="CtrlBottom">
            <h3>Bottom</h3>
              <p>{{bottom}}</p>
              <p>{{bottom_args}}</p>
          </div>
        </div>
  </div>
</body>
</html>

CSS

h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 30px; }

JavaScript

function CtrlTop($scope) {
    // watch for emit event from inside
       $scope.$on("emit", function(event, args) {
           console.log("emit");
           $scope.top = event;
           $scope.top_args = args;
       });
  }
  function CtrlMiddle($scope) {
      $scope.emitter = function() {
          $scope.$emit("emit",['fooe']);  
      };
      $scope.broadcaster = function() {
          $scope.$broadcast("broadcast",['foob']); 
      }
  }
  function CtrlBottom($scope) {
    // watch for broadcast events from outside
       $scope.$on("broadcast", function(event, args) {
           console.log("broadcast");
           $scope.bottom = event;
           $scope.bottom_args = args;
       });
  }