Angular Catch глобальное нажатие

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

Если это действительно глобальный обработчик, вы можете связать его с $document. Вы можете добавить это на этапе запуска. Там вы сможете внедрить другие зависимости, которые вам понадобятся для реализации логики для обработки. Вы также можете добавить его в какой-либо сервис или директиву, если считаете, что их больше, и вам не нужно заботиться о том, где, потому что просто привязав его к $document, вы сделаете его глобальным.

В противном случае вы можете создать директиву, подобную вашей, и привязать ее к элементу. Это дает вам возможность выбрать, к какому элементу вы добавите директиву, и если она глобальная, то достаточно добавить ее в тело, если нет, то вы можете выбрать свой контейнерный элемент.

Что касается второго вопроса, то событие на клавише Esc не вызывается, потому что Esc - это ключ, а не символ. Поэтому вместо нажатия клавиш вам нужно использовать события keydown или keyup.

Вот рабочий пример вашего кода с событием keyup.

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

Я надеюсь, что этот ответ поможет вам.

Answer 2

Я думаю, что вам нужно что-то вроде этого CODEPEN

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