如何绑定（如空间）一个键到整个视口？

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

我试图将它附加到像一个按钮或div一样的元素，它根本没有工作。

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

我该如何做到这一点？

来源

2013-04-17 Jayr Motta

我已经找到答案，将事件绑定到<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

来源

2013-04-17 16:36:46

+1。这几乎是我会做的。 – ProLoser

如何绑定（如空间）一个键到整个视口？

回答

相关问题