AngularJS：ng-keypress 不起作用答案

【问题标题】：AngularJS: ng-keypress is not workingAngularJS：ng-keypress 不起作用
【发布时间】：2014-11-24 06:51:07
【问题描述】：

问题：ng-keypress 不起作用，但如果我将 ng-keypress 替换为 ng-click 则 filterSearchData($event) 功能正常。

HTML：-

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script type="text/javascript" src="ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <body ng-controller="MyCtrl">
            <input type="text" ng-keypress="filterSearchData($event)" />
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </body>
</html>

JS：-

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
    $scope.filterSearchData = function(element) {
        console.log(element);
    };
});

【问题讨论】：

您使用的是哪个版本的 Angular？我不相信它一直受到支持
@lan: 我正在使用 AngularJS v1.0.2

标签： javascript jquery angularjs angular-ui

【解决方案1】：

在这种情况下，我建议使用ng-change 而不是ng-keypress。

// HTML:
<input type="text" ng-model="filter" ng-change="filterSearchData()" />

// Controller:
app.controller('MyCtrl', function($scope, $http) {
    $scope.filterSearchData = function() {
        console.log($scope.filter);
    };
});

【讨论】：

【解决方案2】：

如果由于某种原因您必须使用不支持 ngKeypress 指令的旧版本的 angular，您可以随时添加自己的实现。这很容易做到，例如onKeypress指令：

app.directive('onKeypress', function() {
    return {
        scope: {
            handler: '&onKeypress'
        },
        link: function(scope, element) {
            element.bind('keypress', function(e) {
                scope.handler({$event: e});
            });
        }
    };
});

HTML：

<input type="text" on-keypress="filterSearchData($event)" />

演示：http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

【讨论】：