Question

我正在Angular中构建一个应用程序，我想要有按键事件。但是，我不想在这里使用按键和按键来丢弃我的代码，而是将所有按键事件放入单个工厂（或服务），然后将此工厂导入我的控制器以供使用。

我希望以这种方式做事会让我更容易管理按键事件，并确保我没有冲突（两个事件与同一个按键相关联）或类似事件。

有人对如何管理这个有任何建议吗？

我正在使用angular-ui-keypress。

作为我希望如何使用按键事件的一个例子。

用户可能打开多个标签并点击“cmd + s”来保存文件。我没有在每个打开的文件上触发“保存”方法，而是有一个OpenFilesFactory，按键会映射到OpenFilesFactory.saveFiles方法。

我是否认为这一切都错了？有没有理由不将键盘快捷键绑定到工厂而不是控制器？

Answer 1

我最终做的工作出奇的好，经过一段时间的工作后我会把它作为一个模块开源。

我创建了一个指令，它绑定到$ document

上的按键事件

angular.module('keypress', []).directive('keypressEvents', 
  function($document, $rootScope) {
    return {
      restrict: 'A',
      link: function() {
        $document.bind('keypress', function(e) {
           $rootScope.$broadcast('keypress',e , String.fromCharCode(e.which));
        });
     }
   }
})

然后我创建了第二个指令，用于观察特定元素的按键，基本上为元素提供关键事件的焦点。

angular.module('focus', []).directive('onFocus',
  function() {
    return {
      restrict: 'C',
      link: function(scope) {
       scope.$on('keypress',function(e,parent_evt,key){
        if(scope.keyBindings[key]){
          scope.keyBindings[key](parent_evt, e); 
                          // params reversed so user goes up the chain
        }
       });
     }
   }
 });

在要使用键盘快捷键的任何控制器中，添加键绑定对象

function keyedS(key, parent_evt, evt){
      // key is the key that was pressed
      // parent_evt is the keypress event
      // evt is the focused element object
}
$scope.keyBindings = {
    's': keyedS
}

反馈？

我实际上已经将它与多个键绑定放在一起，所以如果用户选择'ctrl-shift-s'，那就是沿链传递的内容。虽然我仍然在努力寻找一个非常好的方式来获得所有新闻事件。例如。 Tab目前不起作用。

Answer 2

通过将它作为一个单独的资源，我明白你的意思。对我而言，似乎反对Angular的思考，因为事件真的应该“受到控制”。如果您想集中所有按键（或点击）事件，可能需要一个开关/案例：

$scope.keypressHandler = function () {
switch ($event.keyCode)
{
case 13:
$scope.someEnterKeyFunction();
break;
default:
$scope.someDefaultFunction();
break;
}
}

Angular.js按键事件和工厂

2 个答案: