angular ng-focus/focus Eingabeelement

Question

Ich habe drei Eingabeelemente, die als Schaltflächen formatiert sind. Auf ng-keyup rufe ich eine Funktion in meinem Controller auf.

Nun das Problem ist, ich habe manuell auf einen von ihnen zu klicken, um einen Fokus zu bekommen, nur dann funktioniert keyUp.

Ich habe versucht ng-focus = 'Fokus' und dann $ scope.focus = True im Controller einstellen, es hat nicht funktioniert.

<div class="row startButtonRow"> 
    <div class="col col-50" align="center"> 
     <button class="button button-dark startButton" ng-click="start()" ng-disabled="disableStart">Start</button> 
    </div> 

    <div class="col" align="center"> 
     <input ng-focus="focus" type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)"> 
    </div> 

    <div class="col" align="center"> 
     <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)"> 
    </div> 

    <div class="col" align="center"> 
     <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)"> 
    </div> 

    </div> 

Sobald ich auf starten Taste die Symbole, die auf drei Säulen beginnen und soll ich entsprechende Taste drücken (hier Eingabeelement mit Schlüssel-up), sobald ein bestimmtes Symbol angezeigt. Ich möchte nicht zuerst auf das Element klicken und dann die Tastaturtasten verwenden.

Answer 1

ng-keyup muss nicht auf eines Ihrer Eingabeelemente gehen, Sie können es zu Ihrem Körperelement oder was auch immer Ihr ng-app Element ist, und es wird immer noch drücken Tasten drücken.

Auf eine andere Anmerkung, ich glaube, Sie sind Missverständnis, was ng-focus tut. Es wertet den angegebenen Ausdruck aus, wenn die Eingabe fokussiert ist, es weist Ihren Browser nicht an, dieses Element zu fokussieren. Sie wollen eine eigene Richtlinie bauen Ihre Eingaben konzentrieren, finden How to set focus on input field?

Man könnte so etwas zu Ihrem Controller hinzufügen:

var handler = function(e){ 
    if (e.keyCode === 37) { 
     // left arrow 
    } else if (e.keyCode === 38) { 
     // up arrow 
    } else if (e.keyCode === 39) { 
     // right arrow 
    } 
}; 

var $doc = angular.element(document); 

$doc.on('keyup', handler); 
$scope.$on('$destroy',function(){ 
    $doc.off('keyup', handler); 
})