Come posso rilevare onKeyUp in AngularJS?Come posso rilevare onKeyUp in AngularJS?
Sto cercando una direttiva 'ngOnkeyup', simile a ngChange, ma non riesco a trovare nulla di adatto.
Se non esiste una direttiva di questo tipo, esiste un modo pulito per chiamare il controller da un evento onkeyup nativo del browser?
EDIT: vedi seconda risposta sotto da maklemenz che fa riferimento al nuovo built-in ng-keyup direttiva
È possibile utilizzare il angular-ui library:
Con angolare-ui, è possibile basta fare
<input ui-event="{keyup: 'myFn($event)'}"
Se non si desidera utilizzare un'altra libreria, il modo più efficiente e semplice per farlo è:
JS
myApp.directive('onKeyup', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function() {
scope.$apply(attrs.onKeyup);
});
};
});
HTML:
<input on-keyup="count = count + 1">
Edit: Se si voleva rilevare quale tasto è stato premuto, si hanno due opzioni di base davvero. È possibile aggiungere un attributo alla direttiva per gestire le chiavi consentite all'interno della direttiva, oppure è possibile passare il tasto premuto al controller. In genere raccomando che la direttiva gestisca il metodo chiave.
Ecco un esempio di entrambi i modi: http://jsfiddle.net/bYUa3/2
Dovrai creare la tua direttiva personalizzata se le direttive predefinite non sono sufficienti. Qualcosa del genere, potrebbe essere?
<!doctype html>
<html lang="en" ng-app="app">
<body ng-controller="ctrl">
<input ng-onkeyup="keyup()"/>
<script src="js/lib/angular-1.0.0.min.js"></script>
<script>
angular.module('app', []).directive('ngOnkeyup', function() {
return {
restrict: 'A',
scope: {
func: '&ngOnkeyup'
},
link: function(scope, elem, attrs) {
elem.bind('keyup', scope.func);
}
};
});
function ctrl($scope) {
$scope.keyup = function() {
alert('keyup fired');
};
}
</script>
</body>
</html>
FYI - ero solo cercando per questo oggi e sembra che ci sia una filiale a github di angolare che affronta il tema della keyup keydown.
https://github.com/angular/angular.js/pull/1622
E 'stata fusa per incorporazione in Master ... comunque non sembra apparirà in un comunicato fino a 1.1.3
Al fine di costruire la angolare con l'opzione ng-keyup sul posto è possibile scaricare il codice da git ed eseguire rake package sulla cartella. Ovviamente su Windows che significa installare Node.js e Ruby e possibilmente qualche altro cerchio (stavo avendo errori di fork su win32)
Anche se, alla fine ho ottenuto il "built-in" keyup.
Oltre al Raccoglitore Evento già accennato, è ora possibile utilizzare questi comodi direttive UI-chiave * da Angular UI:
<textarea
ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>
<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>
Per tutti coloro alla ricerca di quella funzione oggi, prega utilizzare la direttiva ufficiale ng-keyup:
<input type="text" ng-keyup="{expression}" />
C'è un modo per ottenere un evento key up o keydown sull'oggetto finestra in generale; quindi posso controllare se Ctrl viene premuto? –
@TheRedPea Puoi inserire la tua ng-app e la tua ng-keyup su
. Quindi aggiungi la funzione a $ rootScope o aggiungi anche ng-controller. Non testato ma dovrebbe funzionare. – maklemenzSe ho capito la tua domanda corectly, y stai cercando la direttiva ng-keyup. Ecco un link: http://docs.angularjs.org/api/ng.directive:ngKeyup
Solo per aiutare qualcuno là fuori che, come me, voleva licenziare l'evento solo su una determinata chiave. Ecco il codice che utilizza ng-keyup che chiama la mia funzione cancel() quando, e solo quando, viene premuto escape. Per scoprire che cosa KeyCode si vuole guardare this website
ng-keyup="$event.keyCode == 27 ? cancel() : ''"
Nota che, come fatto presente @maklemenz utilizza la direttiva angolare integrato ora disponibile
Grazie per la risposta. Come posso ottenere quale tasto è stato premuto con la soluzione non angolare-ui? – fadedbee
Ho aggiunto qualcosa al post principale sul rilevamento della chiave. –
Questi sono proprio ciò di cui ho bisogno. Grazie per il tuo aiuto, sto davvero iniziando ad amare usando AngularJS. È brutto buttare via l'esperienza di un anno di utilizzo di KnockoutJS, ma AngularJS sembra essere molto più mantenibile e accessibile per i nuovi sviluppatori. – fadedbee