2013-09-25 13 views
6

Ich habe angefangen, das angular-ui-Tastenmodul zu verwenden und habe mich gefragt, ob es eine Möglichkeit gibt, globale Tastenkombinationen zu erstellen, die funktionieren, egal wo ich in den Körper gestellt werde.angular-ui globale Tastenbelegung

Ich habe versucht, mein UI-Keydown mit dem Körper zu verbinden, aber da es nicht im Fokus ist, werden die Schlüsselereignisse nicht ausgelöst.

zB:

<body ui-keydown="{'pageup':'nav_to($event, \'users\')'}"> 

Ich weiß, ich könnte nur ein div konzentrieren und die Tastenbelegungen zu, dass anhängen, aber was passiert, wenn ich eine Form haben, und ich möchte in jedem Bereich alle globalen Tastenbelegungen zugreifen?

+0

Haben Sie versucht, das Ereignis in Ihrer 'Controller' oder' directive' Link Funktion an '$ window' zu binden? – rogerz

+0

Ich habe jetzt und es beschweren sich über 'Objekt hat keine Methode' anwenden '', also habe ich versucht, eine Funktion anwenden in meiner nav_to-Methode, aber es hat es nicht erkannt. Gibt es eine spezielle Möglichkeit, das zu tun? – map7

+0

Könntest du ein Spiel machen? –

Antwort

16

Versuchen Sie dies in Ihrem Haupt-App Controller:

angular.element($window).on('keydown', function(e) { 
     console.log(e); 
    }); 
+1

Arbeitete brillant, außer dass ich '$ window' in' window' ändern musste. –

+0

@BenFortune Sie sollten den Dienst [$ window] (https://docs.angularjs.org/api/ng/service/$window) als Abhängigkeit zum Controller (oder wo immer er verwendet wird) injizieren. – user2301179

+0

@ user2301179 Es wurde in einer Direktive verwendet und wurde injiziert, obwohl es nicht funktionierte. –

2

Sie einen Controller machen und es auf dem Body-Tag festgelegt, und legen Sie ein Schlüsselereignis Rückruf auch:

<body ng-controller="keycontroller" ui-keyup="{'enter':'callback($event)'}" > 
    <input type="text" ng-model="test1" /> 
    <input type="text" ng-model="test2" /> 
</body> 

Und dann Set:

function keycontroller($scope) { 
    $scope.test1= "It should work here..."; 
    $scope.test2= "...and also here."; 

    $scope.callback = function fn($event) { 
    console.log("Enter key pressed"); 
}; 

} 

var app = angular.module("app", ['ui.keypress']); 
app.controller("keycontroller", keycontroller); 
Verwandte Themen