Question

I’m using the AngularUI keypress directive, but it’s giving me problems. I’m able to create a text field and attach a keypress event to it (basically it’s exactly what’s in the demo on the AngularUI page).

<textarea ui-keypress="{13:'keypressCallback($event)'}">

I’m trying to register hot keys for the buttons on my page, and it’s not working when I attach the same ui-keypress event to the button (or the body of the page for that matter). How can I get my hot keys working?

Answer 1

Build yours.
The way I did is to create 2 directives one for keypress and one for keyup

After you create your module (that I call yourapp), you create your directives.

yourapp.directive('keyPress', function () {
  return function (scope, elm, attrs) {
    elm.bind('keypress', function (e) {
      var intKey = (window.Event) ? e.which : e.keyCode;
      if (intKey === attrs.key) {
        if (scope.theater === 1) {
          scope.$apply(attrs.keyPress);
        }
      }
    });
  };
});

yourapp.directive('keyUp', function () {
  return function (scope, elm, attrs) {
    elm.bind('keyup', function (e) {
      var intKey = (window.Event) ? e.which : e.keyCode;
      if (intKey === attrs.key) {
        if (scope.theater === 1) {
          scope.$apply(attrs.keyUp);
        }
      }
    });
  };
});

So you can use it in this way:

<div key-press="doSomething()" key="13"> // enter
<div key-up="doSomething()" key="27"> // esc

Note: This (window.Event) ? e.which : e.keyCode; will make it cross browser.