Comment détecter onKeyUp dans AngularJS ?
Je cherche une directive "ngOnkeyup", similaire à ngChange, mais je ne trouve rien de convenable.
Si une telle directive n'existe pas, existe-t-il un moyen propre d'appeler le contrôleur à partir d'un événement onkeyup natif du navigateur ?
EDIT : voir la deuxième réponse ci-dessous de maklemenz qui fait référence à la nouvelle directive intégrée ng-keyup.
Vous pourriez utiliser le bibliothèque angular-ui :
Avec angular-ui, vous pouvez simplement faire
<input ui-event="{keyup: 'myFn($event)'}"Si vous ne voulez pas utiliser une autre bibliothèque, le moyen le plus efficace et le plus simple est de le faire :
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">Modifier : Si vous vouliez détecter quelle touche a été pressée, vous avez deux options de base en fait. Vous pouvez ajouter un attribut à la directive pour gérer les touches autorisées dans la directive, ou vous pouvez passer la touche pressée à votre contrôleur. Je recommande généralement que la directive gère la méthode de la touche.
Voici un exemple des deux façons de procéder : http://jsfiddle.net/bYUa3/2
Vous devrez créer votre directive personnalisée si les directives par défaut ne suffisent pas. Quelque chose comme ceci, peut-être ?
<!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>
En plus de l'Event Binder déjà mentionné, vous pouvez maintenant utiliser ces directives ui-key* pratiques d'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>
Pour info, j'ai fait une recherche sur ce sujet aujourd'hui et il semble qu'il y ait une branche dans le github d'Angular qui aborde le problème du keyup keydown.
https://github.com/angular/angular.js/pull/1622
Il a été fusionné dans master... CEPENDANT, il ne semble pas qu'il apparaîtra dans une version avant la 1.1.3.
Afin de construire l'angular avec l'option ng-keyup en place, vous pouvez télécharger le code de git et exécuter rake package sur le dossier. Bien sûr, sous Windows, cela signifie qu'il faut installer Node.js et Ruby et éventuellement d'autres obstacles (j'avais des erreurs de fork sous win32).
Mais j'ai fini par obtenir le keyup "intégré".
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
