Angular Catch 全局按键答案

【问题标题】：Angular Catch global keypressAngular Catch 全局按键
【发布时间】：2015-09-10 13:01:59
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript angularjs keypress

【解决方案1】：

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

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

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

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

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

希望这个回答对你有帮助。

【讨论】：

请注意，您应该在组件的 $onDestroy 方法或作用域的 $destroy 事件中取消绑定此事件。否则，您将在此处创建内存泄漏。

【解决方案2】：

我认为你需要这样的东西CODEPEN

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

【讨论】：

好的，我明白你的意思了，我相信最好用 .run() 代替 config，你在做什么？
对于您在此处发布的案例并不重要。我不会提供任何进一步的建议，因为我不知道您到底要实施什么。如果您想在处理程序中使用任何服务或提供程序，最好将其包装到服务中并将其注入运行方法。 ...run(function(myGlobalKeyHandlerService){ myGlobalKeyHandlerService.start(); })