angular-ui 全局键绑定答案

【问题标题】：angular-ui global key bindingsangular-ui 全局键绑定
【发布时间】：2013-10-06 15:21:23
【问题描述】：

我已经开始使用 angular-ui keypress 模块，并且想知道是否有一种方法可以使全局快捷键无论我放在正文中的哪个位置都可以工作。

我尝试将我的 ui-keydown 链接到正文，但由于它不在焦点上，因此不会触发关键事件。

例如：

<body ui-keydown="{'pageup':'nav_to($event, \'users\')'}">

我知道我可以只关注一个 div 并将键绑定附加到它，但是当我有一个表单并且我想访问每个字段中的所有全局键绑定时会发生什么？

【问题讨论】：

您是否尝试在controller 或directive 链接函数中将事件绑定到$window？
我现在有，它抱怨'对象没有方法'应用''所以我尝试在我的 nav_to 方法中放置一个应用函数，但它没有识别它。有什么特别的方法可以做到吗？
你能放个 jsfiddle 吗？

标签： angularjs keyboard-shortcuts angular-ui

【解决方案1】：

在你的主应用控制器中试试这个：

    angular.element($window).on('keydown', function(e) {
        console.log(e);
    });

【讨论】：

工作出色，但我不得不将 $window 更改为 window。
@BenFortune 您应该将$window 服务作为对控制器（或使用它的任何地方）的依赖项注入。
@user2301179 它在指令中使用并被注入，尽管它不起作用。
我发现这种方法有时会注册不止一次。
如果我在工作，请纠正我，此方法在默认事件之前触发（如果是 go button 则提交表单），因此，有机会捕获事件以完全禁用键盘上的“开始”按钮？

【解决方案2】：

你可以制作一个控制器并设置在body标签上，也可以设置一个按键事件回调：

<body ng-controller="keycontroller"  ui-keyup="{'enter':'callback($event)'}" >
  <input type="text" ng-model="test1" />
  <input type="text" ng-model="test2" />
</body>

然后设置：

function keycontroller($scope) {
   $scope.test1= "It should work here...";
   $scope.test2= "...and also here.";

   $scope.callback = function fn($event) {
    console.log("Enter key pressed");
 };

}

var app = angular.module("app", ['ui.keypress']);
app.controller("keycontroller", keycontroller);

【讨论】：