javascript - 使用 AngularUI 作为热键

Question

我正在使用 AngularUI 按键指令，但它给我带来了问题。我能够创建一个文本字段并将一个按键事件附加到它（基本上它正是 AngularUI 页面上的演示中的内容）。

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

我正在尝试为页面上的按钮注册热键，当我将相同的 ui-keypress 事件附加到按钮（或页面正文）时，它不起作用。我怎样才能让我的热键工作？

Answer 1

建立你的。我所做的方法是创建 2 个指令，一个用于 keypress，一个用于 keyup

在你创建了你的模块（我称之为 yourapp）之后，你就创建了你的指令。

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);
        }
      }
    });
  };
});

所以你可以这样使用它：

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

注意：这(window.Event) ? e.which : e.keyCode;将使其跨浏览器。

Answer 2

尝试 keyup 或 keydown，有些键不能与 keypress 一起使用（ui-keyup、ui-keydown 也存在）。