Директива AngularJS ng-keydown работает только для контекста <input>?

Я новичок в 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.

Ответ 1

У меня была такая же проблема, и я смог ее исправить, выполнив этот простой совет, приведенный в этом комментарии: fooobar.com/questions/79594/...

Вам нужно дать div tabindex, чтобы он мог получать фокус.

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

Ответ 2

Спасибо! Чтобы завершить это, я получил эту работу, введя $document в свою директиву, а затем:

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

Ответ 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);">

Затем funcitons в моем контроллере имеют дело с событием, вызывающим event.which для получения кода ключа (в моей реализации я установил var в rootScope, но вы также могли передавать его другим контроллерам)

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

Ответ 4

Комментарий charlietfl очистил вещи и привязал событие к $(документу), как и следовало ожидать! Отвлечь сообщение. Документация AngularJS не является исчерпывающей, т.е. Требует знания фона.

Ответ 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);
        }
    }
})