Question

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

我试图将它附加到像按钮或div这样的元素上，但根本没用。

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

我怎样才能做到这一点？

Answer 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>

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

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

1 个答案: