Angularjs DELETE when I press the delete keyboard

Question

I created a new directive to delete a when the user press the delt keyboard but it is not working.I used the angularjs directive: ng-keypress

the directive: 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>

and I add the script line to the html file:

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

Answer 1

In order to capture keyboard events an element should be focused. By default a div can't be focused, but you can set tabindex="1" attribute to it so it can capture the focus on mouse click or when calling focus() method (based on your scenario).

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

Furthermore when attaching the directive for the element use dashdelimited notation on-key-enter instead of onKeyEnter