javascript - キープレスのリダイレクト用のAngularJSコードは、サービスまたはディレクティブでなければなりませんか?

原文 javascript angularjs angularjs-directive angularjs-service angularjs-routing

ユーザーがキーボードから特定のキーを押したときに、ユーザーを特定のルートにリダイレクトする必要があります。私の質問は:

懸念の分離とAngularJSのベストプラクティスに照らして、このコードはディレクティブまたはサービスに残す必要がありますか?

DOMを操作するにはディレクティブを使用する必要があることを知っています。それで、それを念頭に置いて、私は以下のサービスを作成しました:

myApp.factory("KeyPressEvents", ['$rootScope', '$document', '$location', function($rootScope, $document, $location){
    return $document.bind("keypress", function(event){
        if(event.charCode==112){
            $rootScope.$apply(function(){
                $location.path('/route2');
            });
        }
    });
}]);


上記のコードでは、ユーザーがキーボードのPを押すたびに「/ route2」にリダイレクトされます。

一方、stackoverflowについて調査したところ、いくつかの回答では、useディレクティブがほぼ同じことを行うように推奨していることがわかりました。

How to use a keypress event in AngularJS?

Binding keyboard events in AngularJS

そしてそれが私がまだそれを完全に理解していない理由です。その問題について何か考えはありますか?
ありがとう!
答え
IMO、ディレクティブはDOM操作に限定されるだけでなく、UIの相互作用にも適しています。スキャナーを登録するのと同じようなことをしました(私のアプリケーションに関する限り、数文字を「タイプ」して、その後に製品コードを続けます)。ディレクティブをhtmlタグに貼り付けました(これが機能するには、ng-appもhtmlタグにある必要があることに注意してください)。おそらく、ディレクティブをテキスト入力に置くこともできますが、私の状況では、本文に置く必要がありました。

<html ng-app="myApp" scanner>


基本的に、このディレクティブはキャレット文字をリッスンし、検出すると、ScannerServiceを使用してそれに応じてリダイレクトを実行します。

  myApp.directive('scanner', ["$state", "ScannerService", function ($state, ScannerService){
    return {
      restrict: 'A',
      link: function (scope, elem) {

        elem.bind('keypress', function (e) {
          if (e.which === 94) { // ^
            barcodeListen = true;
          }

          if (barcodeListen === true) {
            if (e.which === 13) { // new-line
              ScannerService.processBarcode(barcodeText);
              barcodeListen = false;
            }
            e.preventDefault(); // don't print character
          }
        });

      }
    };
  }]);
関連記事

javascript - AngularJS-/以外のパスでパーシャルが読み込まれない

javascript - angularjsドラッグアンドドロップHTMLコンテンツ

javascript - コンテンツをXMLファイルに更新する

java - URLヒット時のエラー、filenotfoundexceptionによると

javascript - Googleスクリプトは日付に基づいてスプレッドシート間で範囲をコピーします

javascript - JavaScript:別のスクリプトに追加されたdivへのアクセスなし

javascript - nodejsのセッションは部分的に保存されています

javascript - マーカー位置json LeafletとWebGLEarthを更新

javascript - JSON:スラッシュがエスケープされるのはなぜですか?

javascript - RotativaでPDFが正しくレンダリングされない