web-dev-qa-db-ja.com

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でそれを処理する方法を理解することを好みます。

angularjshotkeys
37
Lukas N.P. Egger

私は同じ問題を抱えていましたが、このコメントで提供されているこの簡単なヒントに従うことで修正できました： https://stackoverflow.com/a/1718035/80264

Divにtabindexを与えて、フォーカスを取得できるようにする必要があります。

<div id="testdiv" tabindex="0"></div>
83
João Josézinho

ありがとう！これをまとめるために、$ documentをディレクティブに挿入して、次のように機能させました。

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

これが最終的に機能する方法でした。

ng-appをhtml要素に、ng-keyupおよびng-keydownをbody要素に追加します。

<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;
    };
};
8
Gurnard

charlietfl によるコメントは問題を解決し、イベントを$（document）にバインドしましたが、期待どおりに機能しました！テイクアウェイメッセージ：AngularJSのドキュメントは完全なものではありません。つまり、背景知識が必要です。

1
Lukas N.P. Egger
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);
        }
    }
})
0
vvn050