当我按下删除键盘时，Angularjs DELETE <div>答案

【问题标题】：Angularjs DELETE <div> when I press the delete keyboard当我按下删除键盘时，Angularjs DELETE <div>
【发布时间】：2017-08-04 20:00:38
【问题描述】：

我创建了一个新指令来在用户按下 delt 键盘时删除 a 但它不起作用。我使用了 angularjs 指令：ng-keypress

指令：keyboard.js

yemp.planner.app .directive('onKeyEnter', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('keydown keypress', function(event) {
                if (event.which === 46) {
                    var attrValue = $parse(attrs.onKeyEnter);
                    (typeof attrValue === 'function') ? attrValue(scope) : angular.noop();
                    event.deleteTimelineItem();
                    console.log("delete");
                }
            });
            scope.$on('$destroy', function() {
                element.unbind('keydown keypress')
            })
        }
    };
}]);

<div class="time-lime-item-details" onKeyEnter >
    <!-- when the user press delete this div should be deleted -->
</di>

然后我将脚本行添加到 html 文件中：

<script type="text/javascript" src="scripts/directives/keyboard.js"></script>

【问题讨论】：

您介意创建最小的工作 plnkr/jsbin...吗？
@Gangadhar Jannu 请解释您的评论？
如果您可以创建代码的工作副本来复制问题，我们可能会正确理解您的问题。见this

标签： javascript angularjs angularjs-directive keyboard

【解决方案1】：

为了捕捉键盘事件，一个元素应该被聚焦。默认情况下，一个 div 不能被聚焦，但您可以设置 tabindex="1" 属性，以便它可以在鼠标单击或调用 focus() 方法时捕获焦点（根据您的场景）。

How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

此外，在为元素附加指令时，请使用破折号分隔符号 on-key-enter 而不是 onKeyEnter

【讨论】：