Chapter 5: Configuring and using AngularJS events

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <my-listener local="outer">
        <my-listener local="middle">
            <my-listener local="first inner">
                <button ng-click="sendUp()">Send First Up</button>
            </my-listener>
            <my-listener local="second inner">
                <button ng-click="sendUp()">Send Second Up</button>
            </my-listener>
        </my-listener>
    </my-listener>
</div>

JavaScript

angular.module('myApp', [])
.directive('myListener', function($log) {
    return {
        restrict: 'E',
        // each directive should be given its own scope
        scope: true,
        link: function(scope, el, attrs) {
            // method to generate event
            scope.sendUp = function() {
                scope.$emit('myEvent', {origin: attrs.local});
            };
            // method to listen for event
            scope.$on('myEvent', function(event, data) {
                $log.log(`${event.name} observed in ${attrs.local} originated from ${data.origin}`);
            }); 
        }
    };
});