AngularJS ng-keydown指令仅适用于<input>上下文?

Luk*_*ger 38 hotkeys angularjs

我是AngularJS的新手,但到目前为止我发现它非常符合我的喜好.对于我目前的项目,我需要热键功能,很高兴看到自1.1.2版本以来它受支持.

ng-keydown指令(http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown)按输入类型的预期工作,但是对于任何其他上下文(如div等)都不能使用鉴于文件说不然.

这是一个最小的例子(http://jsfiddle.net/TdXWW/12/),分别是不工作的:

<input ng-keydown="keypress($event)">
<div ng-keydown="keypress($event)">
Run Code Online (Sandbox Code Playgroud)

注意:我知道这可以用简单的jQuery(http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/)来处理,但我很多更愿意了解如何在AngularJS中处理它.

Joã*_*nho 84

我遇到了同样的问题,并且能够通过遵循此评论中提供的这个简单提示来修复它:https://stackoverflow.com/a/1718035/80264

你需要给div一个tabindex,以便它可以获得焦点.

<div id="testdiv" tabindex="0"></div>
Run Code Online (Sandbox Code Playgroud)

  • 世界上没有足够的赞成票.这让我疯了一个小时. (7认同)

Fin*_*sen 9

谢谢!为了解决这个问题,我得到了这个,将$ document注入我的指令,然后:

MyApp.directive('myDirective', function($document) {
return {
...
 $document.keydown(function(e){
   console.log(e)
 })
}
Run Code Online (Sandbox Code Playgroud)

  • @Crashthatch使用`.on('keydown')`用于jQuery-lite. (3认同)

Gur*_*ard 8

这就是我最终实现它的方式.

添加ng-apphtml元素,ng-keyupng-keydownbody元素:

<html ng-app="myApp" ng-controller="MainCtrl">
.....
<body ng-keydown="keyPress($event);" ng-keyup="keyRelease($event);">
Run Code Online (Sandbox Code Playgroud)

然后我的控制器中的函数处理事件调用event.which获取密钥代码(在我的实现中我将var设置为rootScope但你也可以广播到其他控制器)

$scope.keyPress = function(eve) {
    if (eve.which === 16) { // shift
        // $rootScope.$broadcast('doShift');
        $rootScope.shiftOn = true;
    };
};
Run Code Online (Sandbox Code Playgroud)


Luk*_*ger 1

charlietfl的评论澄清了事情,并将事件绑定到 $(document) 按预期工作!要点:AngularJS 文档并不是非常详尽,即需要背景知识。