Angular 捕捉全局按键

Question

这个问题有很多答案，但我想不出如何解决两个问题。经过研究，我建立了非常简单的指令。

.directive('keypressEvents', function ($document) {
    return {
        restrict: 'A',
        link: function () {
            $document.bind('keypress', function (e) {
                alert(e.keyCode);
            });
        }
    }
});

第一个问题更像是一个问题，如果我做到了angular.service('myService', myServiceFunction);，它会在全球范围内起作用吗？其次是某些键不起作用，例如 ESC、箭头 ctrl 等。我正在研究这个 CODEPEN

Answer 1

我想你需要这样的东西CODEPEN

angular.module('myApp', [])
.config(function () {
  angular.element(document).bind('keyup', function (e) {
    alert(e.keyCode);
  });
});

Answer 2

如果它确实是全局处理程序，您可以将它绑定到 $document。您可以在运行阶段添加它。在那里，您将能够注入实现处理逻辑所需的其他依赖项。如果您认为它属于更多，您也可以将它添加到某些服务或指令中，您不需要关心在哪里，因为只需将它绑定到 $document 就会使其成为全局的。

否则，您可以像您一样创建指令并将其绑定到元素。这使您可以选择要在哪个元素上添加指令，如果它是全局的，那么将它添加到 body 上就足够了，如果不是，那么您可以选择容器元素。

关于第二个问题，Esc 键上的事件没有触发，因为 Esc 是键而不是字符。因此，您需要使用 keydown 或 keyup 事件，而不是 keypress。

Here 是带有 keyup 事件的代码的工作示例。

$document.bind('keyup', function (e) {
    alert(e.keyCode);
});

希望这个回答对您有所帮助。

Angular 捕捉全局按键

Angular Catch global keypress

javascript

keypress

angularjs