Question

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

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

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

Answer 1

建立你的。我的方法是为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也存在）。

使用AngularUI进行热键

2 个答案: