AngularJS ng-keydown-Direktive funktioniert nur im <input>-Kontext?

Question

Ich bin ziemlich neu in AngularJS, habe es bisher aber ganz gut gefunden. Für mein aktuelles Projekt benötige ich eine Hotkey-Funktionalität und war froh zu sehen, dass sie seit der Version 1.1.2 unterstützt wird.

Die ng-keydown-Direktive (http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown) funktioniert wie erwartet für Eingabetypen, versagt jedoch in anderen Kontexten wie z.B. div etc., was seltsam ist, da die Dokumentation etwas anderes sagt.

Hier ist ein minimales Beispiel (http://jsfiddle.net/TdXWW/12/) für das funktionierende bzw. nicht funktionierende Verhalten:

HINWEIS: Ich weiß, dass dies mit plain jQuery gelöst werden könnte (http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/), aber ich bevorzuge es, zu verstehen, wie man es in AngularJS behandelt.

Answer 1

Ich hatte das gleiche Problem und konnte es lösen, indem ich diesem einfachen Tipp aus diesem Kommentar gefolgt bin: https://stackoverflow.com/a/1718035/80264

Du musst dem div einen Tabindex geben, damit es den Fokus erhalten kann.

Answer 2

Danke! Um dies abzuschließen, habe ich es hinbekommen, indem ich $document in meine Direktive injiziert habe und dann:

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

Answer 3

Dies war der Weg, wie ich es am Ende zum Laufen gebracht habe.

Fügen Sie ng-app zum html Element hinzu und ng-keyup und ng-keydown zum body Element:

.....

Dann behandeln die Funktionen in meinem Controller das Ereignis, indem sie event.which aufrufen, um den Tastencode zu erhalten (in meiner Implementierung setze ich eine Variable auf $rootScope, aber Sie könnten auch an andere Controller broadcasten)

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

Answer 4

Der Kommentar von charlietfl hat die Dinge geklärt und das Binden des Ereignisses an $(document) hat wie erwartet funktioniert! Die Hauptbotschaft: Die AngularJS-Dokumentation ist nicht wirklich erschöpfend, d.h. sie erfordert Hintergrundwissen.

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);
        }
    }
})