Comment puis-je détecter le keydown ou l'événement de compression en angle.js?
j'essaie d'obtenir la valeur d'une boîte de texte de numéro mobile pour valider sa valeur d'entrée en utilisant l'angle.js. Je suis novice en angular.js et pas si sûr comment mettre en œuvre ces événements et mettre un peu de javascript pour valider ou manipuler les entrées de formulaire sur mon code html.
Voici mon HTML:
<div>
<label for="mobile_number">Mobile Number</label>
<input type="text" id="mobile_number" placeholder="+639178983214" required
ngcontroller="RegisterDataController" ng-keydown="keydown">
</div>
Et mon controller:
function RegisterDataController($scope, $element) {
console.log('register data controller');
console.log($element);
$scope.keydown = function(keyEvent) {
console.log('keydown -'+keyEvent);
};
}
Je ne sais pas comment utiliser l'évènement keydown en angle.js, j'ai aussi cherché comment l'utiliser correctement. Et puis-je valider mon commentaires sur les directives? Ou devrais-je utiliser un contrôleur comme ce que j'ai fait pour utiliser les événements comme keydown ou keypress?
4 réponses
mise à Jour:
ngKeypress,ngKeydown et ngKeyup font maintenant partie des AngularJS.
<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">
<!-- or call a controller/directive method and pass $event as parameter.
With access to $event you can now do stuff like
finding which key was pressed -->
<input ng-keypress="changed($event)">
Lire la suite ici:
https://docs.angularjs.org/api/ng/directive/ngKeypress https://docs.angularjs.org/api/ng/directive/ngKeydown https://docs.angularjs.org/api/ng/directive/ngKeyup
solutions antérieures:
Solution 1: Utiliser ng-change avec ng-model
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController" ng-change="keydown()">
JS:
function RegisterDataController($scope) {
$scope.keydown = function() {
/* validate $scope.mobileNumber here*/
};
}
Solution 2. Utilisez $watch
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController">
JS:
$scope.$watch("mobileNumber", function(newValue, oldValue) {
/* change noticed */
});
vous étiez sur la bonne piste avec votre attribut "ng-keydown" sur l'entrée, mais vous avez manqué une étape simple. Juste parce que vous mettez l'attribut ng-keydown là, ne signifie pas angular sait quoi en faire. C'est là que les "directives" entrent en jeu. Vous avez utilisé l'attribut correctement, mais vous devez maintenant écrire une directive qui indiquera à angular ce qu'il doit faire quand il voit cet attribut sur un élément html.
voici un exemple de ce que vous feriez. Nous allons renommer la directive ng-keydownon-keydown (pour éviter de briser la "meilleure pratique" trouvée ici):
var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
// this next line will convert the string
// function name into an actual function
var functionToCall = scope.$eval(attrs.ngKeydown);
elem.on('keydown', function(e){
// on the keydown event, call my function
// and pass it the keycode of the key
// that was pressed
// ex: if ENTER was pressed, e.which == 13
functionToCall(e.which);
});
}
};
});
la directive simple indique à angular que lorsqu'il voit un attribut HTML appelé "ng-keydown", il doit écouter l'élément qui possède cet attribut et appeler quelle que soit la fonction qui lui est transmise. Dans le html, il serait le suivant:
<input type="text" on-keydown="onKeydown">
et puis dans votre controller (comme vous l'aviez déjà fait), vous ajouteriez une fonction à votre le scope du controller qui s'appelle "onKeydown", comme ceci:
$scope.onKeydown = function(keycode){
// do something with the keycode
}
Espérons que cette aide soit vous ou quelqu'un d'autre qui veut savoir
you can checkout Angular UI @ http://angular-ui.github.io/ui-utils/ qui fournissent des détails fonction de rappel de gestion d'événement pour la détection keydown, keyup,keypress (entrer aussi la touche, la touche backspace, la touche alter, la touche control)
<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
code JavaScript à l'aide de ng-controller:
$scope.checkkey = function (event) {
alert(event.keyCode); //this will show the ASCII value of the key pressed
}
Dans le HTML:
<input type="text" ng-keypress="checkkey($event)" />
vous pouvez maintenant placer vos vérifications et autres conditions en utilisant la méthode keyCode.