Chapter 5: Building an event bus

by billy roberts

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

// hide event bus stuff in a service factory

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;
});