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 に答える