Question

How can I detect onKeyUp in AngularJS?

I’m looking for an ‘ngOnkeyup’ directive, similar to ngChange, but I can’t find anything suitable.

If there isn’t such a directive, is there a clean way to call into the controller from a browser-native onkeyup event?

Answer 1

EDIT: see second answer below from maklemenz which refers to the new built-in ng-keyup directive

You could use the angular-ui library:

With angular-ui, you can just do

<input ui-event="{keyup: 'myFn($event)'}"

If you don’t want to use another library, the most efficient and simple way to do this is:

JS

myApp.directive('onKeyup', function() {
  return function(scope, elm, attrs) {
    elm.bind("keyup", function() {
      scope.$apply(attrs.onKeyup);
    });
  };
});

HTML:

<input on-keyup="count = count + 1">

---

Edit: If you wanted to detect which key was pressed, you have two basic options really. You could add an attribute to the directive to handle the allowed keys within the directive, or you could pass the key pressed to your controller. I would generally recommend the directive handles the key method.

Here’s an example of both ways: http://jsfiddle.net/bYUa3/2