Come posso rilevare keydown o keypress event in angular.js?

Sto cercando di ottenere il valore di una casella di testo numero di cellulare per convalidare il suo valore di input usando angular.js. Sono un principiante nell’uso di angular.js e non sono sicuro di come implementare quegli eventi e mettere qualche javascript per convalidare o manipolare gli input del modulo sul mio codice html.

Questo è il mio HTML:

E il mio controller:

  function RegisterDataController($scope, $element) { console.log('register data controller'); console.log($element); $scope.keydown = function(keyEvent) { console.log('keydown -'+keyEvent); }; } 

Non sono sicuro di come utilizzare l’evento keydown in angular.js, ho anche cercato come usarlo correttamente. E posso convalidare i miei input sulle direttive? O dovrei usare un controller come quello che ho fatto per usare gli eventi come keydown o keypress?

Aggiornare:

ngKeypress , ngKeydown e ngKeyup ora fanno parte di AngularJS.

     

Leggi di più qui:

https://docs.angularjs.org/api/ng/directive/ngKeypress https://docs.angularjs.org/api/ng/directive/ngKeydown https://docs.angularjs.org/api/ng/directive/ ngKeyup

Soluzioni precedenti:

Soluzione 1: utilizzare ng-change con ng-model

  

JS:

 function RegisterDataController($scope) { $scope.keydown = function() { /* validate $scope.mobileNumber here*/ }; } 

Soluzione 2. Usa $watch

  

JS:

 $scope.$watch("mobileNumber", function(newValue, oldValue) { /* change noticed */ }); 

Sei stato sulla strada giusta con il tuo attributo “ng-keydown” sull’input, ma ti sei perso un semplice passaggio. Solo perché hai messo l’attributo ng-keydown lì, non significa che angular sa cosa farne. È qui che entrano in gioco le “direttive”. Hai usato l’attributo correttamente, ma ora devi scrivere una direttiva che indichi cosa fare quando vede quell’attributo su un elemento html.

Quello che segue è un esempio di come lo faresti. Rinomineremo la direttiva da ng-keydown a on-keydown (per evitare di rompere la “best practice” qui trovata):

 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 direttiva semplice dice angular che quando vede un attributo HTML chiamato “ng-keydown”, dovrebbe ascoltare l’elemento che ha quell’attributo e chiamare qualunque funzione gli venga passata. Nel codice HTML avresti il ​​seguente:

  

E poi nel tuo controller (proprio come hai già fatto), dovresti aggiungere una funzione all’ambito del controller che è chiamata “onKeydown”, in questo modo:

 $scope.onKeydown = function(keycode){ // do something with the keycode } 

Spero che questo aiuti sia te che qualcun altro che vuole sapere

È ansible eseguire il checkout di Angular UI @ http://angular-ui.github.io/ui-utils/ che fornisce dettagli per gestire la funzione di callback degli eventi per il rilevamento di keydown, keyup, keypress (anche tasto Invio, tasto backspace, tasto altera, tasto di controllo)

     

Codice JavaScript che utilizza ng-controller:

 $scope.checkkey = function (event) { alert(event.keyCode); //this will show the ASCII value of the key pressed 

}

In HTML:

  

Ora puoi mettere i tuoi assegni e altre condizioni usando il metodo keyCode.