绑定到文档事件的多个指令引用

Question

我正在尝试创建一个指令，该指令将允许我将键盘操作绑定到页面中的元素。这是指令

angular.module('app').directive('keyboardAction', keyboardAction);
function keyboardAction() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            document.onkeydown = function (e) {
                if (e.keyCode == attrs.keyboardAction) {
                    element.click();
                }
            };
        }
    };
}

我在 DOM 中有两个元素，我想应用此指令。一个是左箭头链接，另一个是右箭头链接：

<a href="left-href..." keyboard-action="37" class="arrow left">Left</a>
<a href="right-href..." keyboard-action="39" class="arrow right">Right</a>

问题：只有 DOM 中的最后一个指令引用有效（右箭头上的那个）。似乎 DOM 中的最后一个指令引用覆盖了以前的 document.onkeydown 处理程序。有什么建议吗？

Answer 1

使用 .addEventListener() .直接将事件分配给属性是旧帽子：

document.addEventListener('keydown', function (e) {
    if (e.keyCode == attrs.keyboardAction) {
        element.click();
    }
});