Question

如果您使用的是AngularJS，那么绑定键盘按键事件的理想方式是什么？

现在我正在设置控制器内的键盘事件的映射...

ngApp.controller('MainController', function MainController($scope) {
$scope.keyEvents = function() {
    if($('calculator').hasClass('open')) {
      switch(e.keyCode) {
       case 8:
          calc.deleteDigit();
          return;
        case 13:
          calc.equals();
            *etc., etc.*
      }
    }
    var $article = $("article");
    var $articleScrollTop = $article.scrollTop();
    //PageDown
    if(e.keyCode == 34) {
        $('article').animate({
            scrollTop: ($articleScrollTop + 480 + i++)
        }, 500);
    }
    //PageUp
    if(e.keyCode == 33) {
        $article.animate({
            scrollTop: ($articleScrollTop - 480 - i++)
        }, 500);
    }  
  }
}

我开始认为在AngularJS应用程序中附加键盘事件时有最好的做法。

我应该使用element.bind并在相应的指令中设置键盘事件吗？

提前感谢您的帮助！

Answer 1

你想在哪里捕获这些事件？它是在全球范围内还是仅仅是特定的东西？

以下是限制日期键输入字段的示例。

然后你只需装饰输入标签，如

HTML

<input type="text" date-keys />

角度指令

angularDirectivesApp.directive('dateKeys', function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs, controller) {
        debugger;
        element.on('keydown', function (event) {
            if (isNumericKeyCode(event.keyCode) || isForwardSlashKeyCode(event.keyCode) || isNavigationKeycode(event.keyCode))
                return true;
            return false;

        });
    }
}

function isNumericKeyCode(keyCode) {
    return (event.keyCode >= 48 && event.keyCode <= 57)
        || (event.keyCode >= 96 && event.keyCode <= 105);
}

function isForwardSlashKeyCode(keyCode) {
    return event.keyCode === 191;
}

function isNavigationKeycode(keyCode) {
    switch (keyCode) {
        case 8: //backspace
        case 35: //end
        case 36: //home
        case 37: //left
        case 38: //up
        case 39: //right
        case 40: //down
        case 45: //ins
        case 46: //del
            return true;
        default:
            return false;
    }
}
});

绑定AngularJS中的键盘事件

1 个答案: