如何将（如空格）键绑定到整个视口？答案

【问题标题】：How to bind (like space) a key to the entire viewport?如何将（如空格）键绑定到整个视口？
【发布时间】：2013-04-17 16:36:46
【问题描述】：

我想设置一个键来响应我在页面上按下的任何位置，例如，它不绑定到单个输入。

我尝试将它附加到按钮或 div 等元素上，但它根本不起作用。

<div ui-keypress=" { 32: 'test()' } "></div>
<button ui-keypress=" { 32: 'test()' }">Test</button>

我怎样才能做到这一点？

【问题讨论】：

标签： javascript angularjs keyboard-shortcuts angular-ui

【解决方案1】：

我已经找到了答案，将事件绑定到<body> 允许在整个页面中跟踪一个键。

在我的例子中，我想捕捉按键并在给定的控制器中处理它，但是需要在 body 标签上声明它让我前进了一点。我现在有一个主控制器，它有一个emit 方法，这样我就可以捕获事件并将其路由到某种事件总线。

然后我可以在子范围/控制器上捕获事件并检查是否有任何侦听器来处理该按键事件。我在this fiddle上写了一个例子。

"use strict";

angular.module('myApp', ['ui'])
    .controller('MainCtrl', function($scope) {
        $scope.emit = function($event) {
            $scope.$broadcast('keypress', $event);
        };
    })
    .controller('MyCtrl', function ($scope) {
        $scope.$on('keypress', function($event, event) {
            keypressListeners.forEach(function(listener) {
                if (listener.keyCode === event.keyCode)
                    listener.fn();
            });
        });

        $scope.test = function() {
            alert('Works fine!');
        };

        var keypressListeners = [{ keyCode : 32, fn : $scope.test }];
});

<body ng-app="myApp" ng-controller="MainCtrl" ui-keypress=" { 32: 'emit($event)' } " >
  <div ng-controller="MyCtrl"></div>
</body>

我会很感激这方面的 cmets 和提示 ;D

【讨论】：