Targeting keydown events to an angularJS custom directive

Question

I am working on a problem wherein I am required to pick-up keydown events (specifically ctrl+p and then point to a print function which already exists) on a certain custom directive and under certain conditions (a certain tab should be selected). My current approach is to bind the keydown event on the document itself, broadcast it and then listen to it in the required custom directive. Following is the code I have placed in the app.run.. block -

    angular.element($document).on('keydown', function(evt) {
        if(evt.ctrlKey && evt.key==='p'){
             $rootScope.$broadcast('printOnKeyPress');
        }
    });

This part is working as expected, the problem arises when I try to handle it in the required controller of the custom directive as follows:

    $scope.$on('printOnKeyPress', function() {
      //point to existing print function
    }

This is where the problem arises. It goes into the print function but still the output is incorrect. I am missing something and I can't figure out what. Also, this is not a good approach but I have searched and am unable to find a possible solution to just bind the keydown event on that custom directive itself (the component only appears if a document is selected). (ng-keydown won't also work here) Any help is appreciated!

Answer 1

You could put it in the directive and use the scope destroy event to remove the listener.

Within directive link function:

function keyHandler(evt) {
  if (evt.ctrlKey && evt.key === 'p') {
    // do your print
  }
}

angular.element($document).on('keydown', keyHandler);

scope.$on('$destroy', function() {
  angular.element($document).off('keydown', keyHandler);
});