angular.js에서 키 다운 또는 키 누르기 이벤트를 감지하려면 어떻게 해야 합니까?

angular.js에서 키 다운 또는 키 누르기 이벤트를 감지하려면 어떻게 해야 합니까?

angular.js를 사용하여 입력값을 검증하기 위해 휴대전화 번호 텍스트 상자의 값을 가져오려고 합니다.저는 angular.js를 처음 사용하는 사람이라 이러한 이벤트를 어떻게 구현해야 할지 잘 모르고 html 코드에 폼 입력을 검증하거나 조작하기 위해 javascript를 몇 개 넣었습니다.

이것은 나의 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);
       };
    }

angular.js에서 keydown 이벤트를 어떻게 사용하는지 잘 모르겠고, 어떻게 사용하는지도 찾아봤어요.지시사항에 대한 입력 내용을 확인할 수 있습니까?아니면 지금까지와 같은 컨트롤러를 사용하여 키다운이나 키 누르기와 같은 이벤트를 사용해야 합니까?

업데이트:

ngKeypress,ngKeydown그리고.ngKeyup이제 Angular의 일부가 되었습니다.JS.

<!-- 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 */
});

입력에 "ng-keydown" 속성을 사용하여 올바른 방향으로 가고 있었지만 간단한 단계를 놓쳤습니다.ng-keydown Atribute를 입력했다고 해서 angular가 이 Atribute를 어떻게 해야 하는지 알고 있는 것은 아닙니다.여기서 '지침'이 발휘됩니다.Atribute를 올바르게 사용했지만 html 요소에서 Atribute를 발견했을 때 어떻게 해야 하는지 각도로 지시하는 지시문을 작성해야 합니다.

다음은 이를 수행하는 방법의 예입니다.지시문의 이름을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은 "ng-keydown"이라는HTML 속성을 발견하면 해당 속성을 가진 요소를 듣고 전달된 함수를 호출해야 함을 angular에 알립니다.html에는 다음과 같은 내용이 있습니다.

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

그런 다음 (이미 가지고 있던 것과 마찬가지로) 컨트롤러의 범위에 다음과 같이 "onKeydown"이라고 하는 기능을 추가합니다.

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

그게 당신이나 다른 누군가에게 도움이 됐으면 좋겠어요

Angular UI @ http://angular-ui.github.io/ui-utils/ 에서는 키다운, 키업, 키 누르기(Enter 키, 백스페이스 키, alter 키, 제어 키)를 검출하기 위한 상세 이벤트 핸들 콜백 기능을 제공합니다.

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

ng-controller를 사용하는 JavaScript 코드:

$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 메서드를 사용하여 체크 및 기타 조건을 설정할 수 있습니다.

언급URL : https://stackoverflow.com/questions/18360202/how-can-i-detect-keydown-or-keypress-event-in-angular-js