Is there an AngularJS way to have a press of a key call a routine in my controller?

Question

I'm expecting someone is going to suggest I use jQuery (which I have loaded) but just to be sure before I look into how to implement can someone tell me if there is another way that I can make the hitting of a key (the right arrow key) call a javascript function in my controller.

Answer 1

If you want to listen to events on the document

• register an event listener when the scope is instantiated
• make sure you also destroy it when the scope is destroyed
• I also tried to use keypress but it seems to ignore the arrow keys.
• Read more: jQuery Keypress Arrow Keys
• Maybe you'll need to use e.which: Javascript .keyCode vs. .which?

var handler = function(e){
    if(e.keyCode === 39) {
      console.log('right arrow');
      // $scope.doSomething();
    }      
};

var $doc = angular.element(document);

$doc.on('keydown', handler);
$scope.$on('$destroy',function(){
  $doc.off('keydown', handler);
})

---

What about ng-keypress / ng-keydown :

• ng-keypress has a the same problem with arrow keys ( It just uses element.on('keypress',).
• ng-keydown will probably work as well for you.

What is the angular way?

• "Angular way" is a subjective term, although most angular experts would agree to some level.
• Sometimes, angular let you choose between different ways and they are all fine.
• It always depends on how your app is structured and what you want to achieve.
• Angular.js provides some toys for convenience ( the built-in directives ), it doesn't mean you should always prefer using them.
• My guidelines are decoupled / simple / clean code as much as possible.
• Declarative not always means decoupled / simple / clean ( hmm... XML )
• If your whole code lives inside a controller so why decouple it with a specific template that must declare ng-event with a specific function?!
• I would always consider creating custom directives for events & handlers (but again it depends on the use case).
• As you master angular.js (learn the internals) you will find "your own angular way".

Answer 2

You could use ng-keypress="callFunction($event)"

And in function

$scope.callFunction = function(eventNew) {
  if (eventNew.which==39)
    alert('Right arrow key pressed');
}