Как я могу обнаружить событие keydown или keypress в angular.js?

Я пытаюсь получить значение текстового поля мобильного номера для проверки его входного значения с помощью angular.js. Я новичок в использовании angular.js и не очень уверен, как реализовать эти события и поместить некоторый javascript для проверки или манипуляции вводами форм в моем html-коде.

Это мой HTML:

    <div>
        <label for="mobile_number">Mobile Number</label>
        <input type="text" id="mobile_number" placeholder="+639178983214" required
           ngcontroller="RegisterDataController" ng-keydown="keydown">
    </div>

И мой контроллер:

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

Я не уверен, как использовать событие keydown в angular.js, я также искал, как правильно его использовать. И могу ли я проверить мои данные по директивам? Или я должен использовать контроллер, как то, что я сделал для использования таких событий, как keydown или keypress?

Ответы

Ответ 1

Обновление:

ngKeypress, ngKeydown и ngKeyup теперь являются частью 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)">

Подробнее здесь:

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

Предыдущие решения:

Решение 1: используйте ng-change с помощью 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*/
   };
}

Решение 2. Используйте $watch

<input type="text" placeholder="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController">

JS:

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

Ответ 2

Вы были на правильном пути со своим атрибутом "ng-keydown" на входе, но вы пропустили простой шаг. Просто потому, что вы добавили атрибут ng-keydown, не означает, что angular знает, что с ним делать. То, что "директивы" вступают в игру. Вы правильно использовали атрибут, но теперь вам нужно написать директиву, которая сообщит angular, что делать, когда видит этот атрибут в элементе html.

Ниже приведен пример того, как вы это сделаете. Мы переименуем директиву от ng-keydown до on-keydown (чтобы избежать нарушения "лучшей практики", найденной здесь):

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);
             });
        }
    };
});

Директива simple сообщает angular, что когда он видит атрибут HTML, называемый "ng-keydown", он должен прослушивать элемент, который имеет этот атрибут, и вызывать любую функцию, переданную ему. В html у вас будет следующее:

<input type="text" on-keydown="onKeydown">

И затем в вашем контроллере (как и у вас уже было) вы добавили бы функцию в область вашего контроллера, которая называется "onKeydown", например:

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

Надеюсь, это поможет вам или кому-то еще, кто хочет знать

Ответ 3

Вы можете проверить Angular UI @http://angular-ui.github.io/ui-utils/, которые предоставляют подробную функцию обратного вызова дескриптора события для обнаружения keydown, keyup, keypress (также введите клавишу, клавишу возврата, клавишу изменения, клавишу управления)

<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>

Ответ 4

Код JavaScript с помощью ng-controller:

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

}

В HTML:

<input type="text" ng-keypress="checkkey($event)" />

Теперь вы можете поместить свои чеки и другие условия с помощью метода keyCode.