Question

我对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)">

注意：我知道这可以用普通的jQuery（http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/）处理，但我更喜欢理解如何在AngularJS中处理它。

Answer 1

我遇到了同样的问题，并且可以按照此评论中提供的简单提示进行修复：https://stackoverflow.com/a/1718035/80264

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

<div id="testdiv" tabindex="0"></div>

Answer 2

谢谢！为了解决这个问题，我得到了这个工作，将$ document注入我的指令，然后：

MyApp.directive('myDirective', function($document) {
return {
...
 $document.keydown(function(e){
   console.log(e)
 })
}

Answer 3

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

将ng-app添加到html元素，将ng-keyup和ng-keydown添加到body元素：

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

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

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

Answer 4

charlietfl的评论清除了事件并将事件绑定到$（文档）按预期工作！带走信息：AngularJS文档并非真正详尽无遗，即需要背景知识。

Answer 5

angular.module('app').directive('executeOnEnter', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attrs, $rootScope) {                      
            $('body').on('keypress', function (evt) {
                if (evt.keyCode === 13) {
                    el.trigger('click', function () {
                    });
                }            
            })

        },
        controller: function ($rootScope) {
            function removeEvent() {
                $("body").unbind("keypress");
            }
            $rootScope.$on('$stateChangeStart', removeEvent);
        }
    }
})

Answer 6

它对我来说很好，只需添加tabindex属性即可。确保ng-keydown包含正确的angularjs表达式

    <div ng-keydown="keypress($event)" tabindex="0">

    $scope.keypress = function(ev) {
        console.log('keyprez', ev);
    }

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

6 个答案: