如何在 AngularJS 中检测 onKeyUp？答案

【问题标题】：How can I detect onKeyUp in AngularJS?如何在 AngularJS 中检测 onKeyUp？
【发布时间】：2012-07-01 03:02:47
【问题描述】：

如何在 AngularJS 中检测 onKeyUp？

我正在寻找一个类似于 ngChange 的“ngOnkeyup”指令，但我找不到任何合适的。

如果没有这样的指令，是否有一种干净的方法可以从浏览器原生 onkeyup 事件调用控制器？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只是为了帮助那些像我一样只想在某个键上触发事件的人。这是使用ng-keyup 的代码，它在且仅当按下转义时调用我的cancel() 函数。要找出您想要的键码，请查看this website

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

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

【讨论】：

【解决方案3】：

编辑：见下面来自 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

【讨论】：

感谢您的回答。如何获取您的非 angular-ui 解决方案按下了哪个键？
我在主帖中添加了一些关于检测密钥的内容。
这些正是我所需要的。感谢您的帮助，我真的开始喜欢使用 AngularJS。放弃一年使用 KnockoutJS 的经验感觉很糟糕，但 AngularJS 看起来对新开发人员来说更易于维护和平易近人。
这是另一个镜头。（我分叉了你的 jsfiddle Andy。）使用 $parse 并使用范围 mixin 调用它可以提供更大的灵活性——表达式可以是函数或内联表达式，并且可以使用 $key 值执行任何操作。 jsfiddle.net/g6Yvb/2
这个答案并不过时，因为添加了 ng-keyup 指令。（免责声明：我根本没有使用 AngularJS 的经验）。请参阅stackoverflow.com/a/18534733/2916086

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

一般来说有没有办法在窗口对象上获取按键向上或按键向下事件；所以我可以检查是否按下了 Ctrl？
@TheRedPea 你可以把你的 ng-app 和你的 ng-keyup 放在上。然后将该函数添加到 $rootScope 或添加 ng-controller。未经测试，但应该可以工作。

【解决方案6】：

除了已经提到的事件绑定器，您现在可以在 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

【讨论】：

【解决方案7】：

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

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

它已被合并到 master...但是它看起来不会出现在 1.1.3 之前的版本中

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

不过，我最后确实得到了“内置”键。

【讨论】：

【解决方案8】：

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

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

【讨论】：