Question

当他/她从键盘按下特定键时，我需要将用户重定向到特定路线。我的问题是：

鉴于关注点和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');
            });
        }
    });
}]);

在上面的代码中，用户被重定向到＆＃39; / route2＆＃39;每当他按下键盘上的P时。

另一方面，研究stackoverflow，我意识到一些答案建议使用指令做几乎相同的事情：

How to use a keypress event in AngularJS?

Binding keyboard events in AngularJS

这就是为什么我仍然没有得到它。有关这个问题的任何想法？谢谢！

Answer 1

IMO，指令不仅限于DOM操作，而且也适用于UI交互。我做了类似的事情，注册了扫描仪（就我的应用程序而言，只是＆＃34;类型＆＃34;一些字符后跟产品代码）。我将指令粘贴在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
          }
        });

      }
    };
  }]);

Answer 2

正如我希望快捷方式在应用程序范围内，我在app.run中插入代码，正如@DanielWeiner的评论所示。所以，我最终得到了这个：

app.run(['$rootScope', '$document', '$location',
    function($rootScope, $document, $location){
        $document.bind("keypress", function(event) {
            if($('input:focus').length == 0) {
                // If we press the 'j' key, goes to /route2
                if(event.charCode==112){
                    $rootScope.$apply(function(){
                        $location.path('/route2');
                    });
                }
            }
        });
    }
]);

感谢您的回答和评论。

在keypress上重定向的AngularJS代码应该是服务还是指令？

2 个答案: