How custom directive can know if it has been clicked on another control

Question

I have created custom angular directive, something like type ahead. I have angular ui datepicker on the screen too. I would like to close type ahead when I click on datepicker?

How is it possible to catch an event within the custom directive when I click on datepicker?

Answer 1

var app = angular.module('app', []);

app.constant('APP_EVENTS', {
    DATEPICKER_SHOWN: 'datepicker-shown'
});

app.directive('typeAhead', function ($rootScope, APP_EVENTS) {
    return {
        link: function (scope) {
            var deregister = $rootScope.$on(APP_EVENTS.DATEPICKER_SHOWN, function () {
                // hide type ahead
            });

            scope.$on('$destroy', deregister);
        }
    };
});

Now, use ng-click to broadcast the event of datepicker being shown so that typeahead can catch it.