Question

如何在AngularJS中检测onKeyUp？

我正在寻找一个'ngOnkeyup'指令，类似于ngChange，但我找不到合适的东西。

如果没有这样的指令，是否有一种干净的方式从浏览器本机的onkeyup事件调用控制器？

Answer 1

对于今天寻找该功能的每个人，请使用官方ng-keyup指令：

<input type="text" ng-keyup="{expression}" />

Answer 2

编辑：请参阅maklemenz下面的第二个答案，该答案涉及新的内置ng-keyup指令

您可以使用angular-ui library：

使用angular-ui，你可以做到

<input ui-event="{keyup: 'myFn($event)'}"

如果您不想使用其他库，最有效和最简单的方法是：

JS

myApp.directive('onKeyup', function() {
  return function(scope, elm, attrs) {
    elm.bind("keyup", function() {
      scope.$apply(attrs.onKeyup);
    });
  };
});

HTML：

<input on-keyup="count = count + 1">

编辑：如果您想要检测按下了哪个键，您确实有两个基本选项。您可以向指令添加属性以处理指令中允许的键，或者您可以将按键传递给控制器。我通常会建议指令处理密钥方法。

以下是两种方式的示例：http://jsfiddle.net/bYUa3/2

Answer 3

如果默认指令不够，则必须创建自定义指令。这样的事情，可能是吗？

<!doctype html>
<html lang="en" ng-app="app">
  <body ng-controller="ctrl">
    <input ng-onkeyup="keyup()"/>
    <script src="js/lib/angular-1.0.0.min.js"></script>
    <script>
      angular.module('app', []).directive('ngOnkeyup', function() {
        return {
          restrict: 'A',
          scope: {
            func: '&ngOnkeyup'
          },
          link: function( scope, elem, attrs ) {
            elem.bind('keyup', scope.func);
          }
        };
      });

      function ctrl($scope) {
        $scope.keyup = function() {
          alert('keyup fired');
        };
      }
    </script>
  </body>
</html>

Answer 4

除了已经提到的Event Binder之外，您现在可以使用Angular UI中的这些方便的ui-key *指令：

<textarea
 ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
  ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
  ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>

<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>

http://angular-ui.github.io/#/directives-keypress

Answer 5

只是为了帮助那些像我一样只想在某个键上发射事件的人。以下是使用ng-keyup的代码，该代码仅在按下escape时调用cancel()函数。要了解您想要的密码，请查看this website

ng-keyup="$event.keyCode == 27 ? cancel() : ''"

请注意，正如@maklemenz所提到的，它使用现在可用的内置Angular指令

Answer 6

仅供参考 - 我今天只是在寻找这个，看来Angular的github中有一个分支解决了keyup keydown的问题。

https://github.com/angular/angular.js/pull/1622

它已被合并为主...但是它看起来不会在1.1.3之前出现在发布中

为了使用ng-keyup选项构建角度，您可以从git下载代码并在该文件夹上运行rake package。当然在Windows上意味着安装Node.js和Ruby以及可能的其他一些环节（我在win32上遇到了fork错误）

尽管如此，我最终确实得到了“内置”键盘。

Answer 7

如果我理解你的问题，那么你正在寻找ng-keyup指令。这是一个链接：http://docs.angularjs.org/api/ng.directive:ngKeyup

Answer 8

我知道我的回答为时已晚，但希望对某些人有所帮助。如果您正在寻找一种快速简便的方法，可以使用以下方法：

 // in the controller
    
    // get element by id, you can use by class...
    var element = angular.element('#element');
    
    element.keyup(function () {
    console.log('keyup fired');
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<input id="element" type="text" />

如何检测AngularJS中的onKeyUp？

8 个答案: