40

我对 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 中处理它。

4

6 回答 6

86

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

您需要给 div 一个 tabindex 以便它可以接收焦点。

<div id="testdiv" tabindex="0"></div>
于 2013-08-16T15:52:33.330 回答
9

谢谢!为了结束这个,我通过将 $document 注入到我的指令中来完成这个工作,然后:

MyApp.directive('myDirective', function($document) {
return {
...
 $document.keydown(function(e){
   console.log(e)
 })
}
于 2013-06-12T09:09:25.087 回答
8

这就是我最终让它工作的方式。

添加ng-apphtml元素和和ng-keyup元素:ng-keydownbody

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

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

$scope.keyPress = function(eve) {
    if (eve.which === 16) { // shift
        // $rootScope.$broadcast('doShift');
        $rootScope.shiftOn = true;
    };
};
于 2014-03-07T09:23:11.290 回答
1

charlietfl的评论清除了一切,并将事件绑定到 $(document) 按预期工作!带走信息:AngularJS 文档并不详尽,即需要背景知识。

于 2013-03-29T18:04:39.523 回答
0
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);
        }
    }
})
于 2016-05-24T07:55:14.140 回答
0

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

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

    $scope.keypress = function(ev) {
        console.log('keyprez', ev);
    }
于 2019-11-27T09:46:28.670 回答