Question

我的第一个角应用程序是一个非常基本的调查工具。我有多个选择题，每个答案都有一个按钮，还有一个基本功能，可以点击按钮点击每个答案：

ng-click="logAnswer(answer.id)"

我正在寻找的是能够在文档中添加一个按键事件，该事件将侦听1,2,3,4,5的键盘响应，该响应与按钮选项匹配并调用同样的功能。

在搜索时，我只能在特定输入字段具有焦点时找到与按键相关的响应，这对我没有帮助。我确实在这篇帖子Angular.js keypress events and factories上找到了OPs响应，这似乎正朝着正确的方向前进，但我无法弄清楚我如何得到他的指令来调用我的函数。

我在我的js中包含了该指令：

angular.module('keypress', []).directive('keypressEvents', 
  function($document, $rootScope) {
    return {
      restrict: 'A',
      link: function() {
        $document.bind('keypress', function(e) {
           $rootScope.$broadcast('keypress',e , String.fromCharCode(e.which));
        });
     }
   }
})

但我不确定如何在控制器中使用键绑定对象：

function keyedS(key, parent_evt, evt){
      // key is the key that was pressed
      // parent_evt is the keypress event
      // evt is the focused element object
}
$scope.keyBindings = {
    's': keyedS
}

如何让键绑定对象侦听我正在侦听和关闭我需要的功能的键？

感谢

Answer 1

抓住控制器中的rootscope发出的事件：

$rootScope.$on('keypress', function (e, a, key) {
    $scope.$apply(function () {
        $scope.key = key;
    });
})

然后

key将在控制器中使用。

这里是fiddle

Answer 2

如果您坚持使用AngularJS来检测按键事件，ngKeypress就是您想要使用的。

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

您可以查看ngKeypress的文档以获取更多信息。您可能还想查看ngKeydown和ngKeyup指令。

Answer 3

有人已经创建了一个特定的键盘快捷键AngularJS模块，看看：

https://github.com/chieffancypants/angular-hotkeys#angular-hotkeys-

Answer 4

function on specific keypress/keydown

只有在按下特定键时才可以调用函数，比如空格键？我已查看ngKeydown
<input ng-keydown="function()">
但是这会在每个按键上调用该函数，是否可以看到按下了哪个键，可能在函数内？

使用$event指令公开的ng-keydown对象。

 <input ng-keydown="fn($event)">

JS

 $scope.fn = function (event) {
     $scope.keyCode = event.keyCode;
     if (event.keyCode == 32) {
         console.log("spacebar pressed");
     };
 });

DEMO on PLNKR

有关$event对象的详细信息，请参阅AngularJS Developer Guide - $event

Answer 5

看看ngKeyup指令。 Description of ngKeyUp

根据按键

为您需要的各种功能使用一系列功能

angular.js监听按键作为按钮的快捷方式

5 个答案:

function on specific keypress/keydown