html - 如何检测 angular.js 中的 keydown 或 keypress 事件？

Question

我正在尝试获取手机号码文本框的值，以使用 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> 

还有我的 Controller :

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

我不确定如何在angular.js中使用keydown事件，我也搜索了如何正确使用它。我可以验证我对指令的输入吗？或者我应该像我所做的那样使用 Controller 来使用 keydown 或 keypress 等事件吗？

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