Angular.js键preSS事件和工厂 [英] Angular.js keypress events and factories

问题描述

我在建设的角度应用程序，我想有重点preSS事件。
不过，我倒是preFER不要乱扔垃圾我的code一键$ P $这里PSS和关键preSS那里，而是把所有的关键preSS事件到一个单一的工厂（或服务），然后导入这个工厂到我的控制器使用。

I'm building an app in Angular and I'd like to have keypress events. However, I'd prefer not to litter my code with a keypress here and a keypress there, but rather to put all keypress events into a single factory (or service) and then import this factory into my controllers to use.

我希望做的事情这样会让我更容易地管理关键preSS事件，并确保我没有冲突（两个事件联系在一起的相同的密钥presses）或类似的东西这一点。

I HOPE that doing things this way will make it easier for me to manage the keypress events and make sure I don't have conflicts (two events tied to the same keypresses) or something like that.

没有任何人对如何管理这个有什么建议？

Does anybody have any suggestions on how to manage this?

我采用了棱角分明的UI键preSS。

I'm using angular-ui-keypress.

至于如何我希望用钥匙preSS事件的例子。

As an example of how I'm hoping to use keypress events.

用户可以有多个选项卡中打开和点击CMD + S保存文件。
而不是被触发每个打开的文件的保存的方法，我有一个OpenFilesFactory，关键preSS将映射到OpenFilesFactory.saveFiles方法。

The user may have multiple tabs open and hits 'cmd+s' to save the files. Rather than a 'save' method being triggered on each of the open files, I've got an OpenFilesFactory, the keypress would map to the OpenFilesFactory.saveFiles method.

我要对所有这一切错了吗？有没有理由不以配合键盘快捷键工厂，而不是在控制器？

Am I going about this all wrong? Is there a reason not to tie keyboard shortcuts to a factory rather than in a controller?

推荐答案

最后我做什么工作出奇地好，我会开源它作为以后更多的工作的模块。

What I ended up doing worked surprisingly well, and I'll opensource it as a module after a bit more work.

我创建了一个指令，它结合到$文档

I created a directive, which binds to the keypress events on $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));
        });
     }
   }
})

然后，我创建了第二个指令观看关于特定元素键presses，基本上给元素的重点关键事件。

I then created a second directive for watching for keypresses on specific elements, basically giving the element a focus for key events.

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
        }
       });
     }
   }
 });

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

In any controller where you want to use keyboard shortcuts, add a keybindings object

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键，这就是被沿着链传递。虽然我仍然在努力寻找让所有的preSS事件的一个非常好的途径。例如。选项​​卡不会在此刻工作。

I've actually put this together with multiple keybindings, so if the user selects 'ctrl-shift-s', that is what gets passed along the chain. Though I'm still struggling to find a really good way of getting all the press events. Eg. Tab doesn't work at the moment.

这篇关于Angular.js键preSS事件和工厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！