web-dev-qa-db-ja.com

angle.jsはボタンのショートカットとしてキープレスをリッスンします

私の初めてのangularアプリケーションは、かなり基本的な調査ツールです。各回答のボタンと、ボタンのクリックで各回答をログに記録する基本機能を備えた、複数の選択肢の質問があります。

ng-click="logAnswer(answer.id)"

私が探しているのは、ボタンの選択と一致し、同じ関数を呼び出す1、2、3、4、5のキーボード応答をリッスンするキープレスイベントをドキュメントに追加できるようにすることです。

周りを検索すると、特定の入力フィールドにフォーカスが設定された後のキー押下に関連する応答しか見つかりません。これは役に立ちません。この投稿でOPの応答を見つけました Angular.jsキープレスイベントとファクトリ これは正しい方向に向かっているようですが、関数を呼び出すための彼のディレクティブを取得する方法がわかりません。

Jsにディレクティブを含めました：

angular.module('keypress', []).directive('keypressEvents', 
  function($document, $rootScope) {
    return {
      restrict: 'A',
      link: function() {
        $document.bind('keypress', function(e) {
           $rootScope.$broadcast('keypress',e , String.fromCharCode(e.which));
        });
     }
   }
})

しかし、コントローラー内でキーバインドオブジェクトをどのように使用するかはわかりません。

function keyedS(key, parent_evt, evt){
      // key is the key that was pressed
      // parent_evt is the keypress event
      // evt is the focused element object
}
$scope.keyBindings = {
    's': keyedS
}

キーバインディングオブジェクトに、リッスンしているキーをリッスンさせ、必要な関数を起動させるにはどうすればよいですか？

ありがとう

javascriptjqueryangularjsangularjs-directivekeypress
9
bitfidget

コントローラのルートスコープによって発行されたイベントをキャッチします。

$rootScope.$on('keypress', function (e, a, key) {
    $scope.$apply(function () {
        $scope.key = key;
    });
})

keyは、コントローラーで使用するものです。

これが フィドル

13
Jorg

特定のキー押下/キーダウン時の機能

スペースバーのように、特定のキーが押されたときにのみ関数を呼び出すことはできますか？私は調べました ngKeydown

<input ng-keydown="function()">

しかし、これはすべてのキーを押すたびに関数を呼び出します。おそらく関数内で、どのキーが押されたかを確認することは可能ですか？

$eventディレクティブによって公開されたng-keydownオブジェクトを使用します。

 <input ng-keydown="fn($event)">

JS

 $scope.fn = function (event) {
     $scope.keyCode = event.keyCode;
     if (event.keyCode == 32) {
         console.log("spacebar pressed");
     };
 });

PLNKRのデモ

$eventオブジェクトの詳細については、 AngularJS開発者ガイド-$ event を参照してください。

1
georgeawg

AngularJSを使用してキー押下イベントを検出することを主張する場合は、ngKeypressを使用します。

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

詳細については、 ngKeypress のドキュメントを確認してください。 ngKeydown および ngKeyup ディレクティブも確認することをお勧めします。

1
rageandqq

誰かがすでに特定のキーボードショートカットAngularJSモジュールを作成しました。見てください：

https://github.com/chieffancypants/angular-hotkeys#angular-hotkeys-

1
Christian Bonato

NgKeyupディレクティブを見てください。 ngKeyUpの説明

キーを押すことに基づいて、必要なさまざまな機能に一連の機能を使用します

0
Jim Kennelly