javascript - 使用 AngularUI 作为热键

Question

我正在使用 AngularUI 按键指令，但它给我带来了问题。我可以创建一个文本字段并向其附加一个按键事件(基本上这正是 AngularUI 页面上的演示中的内容)。

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

我正在尝试为页面上的按钮注册热键，但当我将相同的 ui-keypress 事件附加到按钮(或页面的主体)时，它不起作用。如何让我的热键正常工作？

Answer 1

构建你的。我所做的方法是创建 2 个指令，一个用于按键，一个用于 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; 将使其跨浏览器。