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-appします。htmlng-keyupng-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 に答える