0

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

我试图将它附加到按钮或 div 之类的元素上，但它根本不起作用。

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

我怎样才能做到这一点？

4

1 回答 1

2

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

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

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

"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

于 2013-04-17T16:36:46.463 回答