Chapter 5: Building an event bus

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="generateEvent()">Generate event</button>
  </div>
  <div my-dir></div>
</div>

JavaScript

angular.module('myApp', [])
  .controller('Ctrl', function($scope, EventBus, $log) {
    $scope.generateEvent = function() {
      EventBus.emitMsg('busEvent');
    };

    EventBus.onMsg('busEvent', function() {
        $log.log('Handler called!');
      },
      $scope
    );

  })
  .directive('myDir', function($log, EventBus) {
    return {
      scope: {},
      link: function(scope, el, attrs) {
        EventBus.onMsg( 'busEvent', function() {
            $log.log('Handler called!');
          },
          scope
        );
      }
    };
  })
  .factory('EventBus', function($rootScope) {
    var eventBus = {};
    eventBus.emitMsg = function(msg, data) {
      data = data || {};
      $rootScope.$emit(msg, data);
    };
    eventBus.onMsg = function(msg, func, scope) {
      var unbind = $rootScope.$on(msg, func);
      if (scope) {
        scope.$on('$destroy', unbind);
      }
      return unbind;
    };
    return eventBus;
  });