48

AngularJSでonKeyUpを検出するにはどうすればよいですか？

ngChangeに似た「ngOnkeyup」ディレクティブを探していますが、適切なものが見つかりません。

そのようなディレクティブがない場合、ブラウザーネイティブのonkeyupイベントからコントローラーを呼び出すクリーンな方法はありますか？

4

8 に答える 8

77

今日その機能を探しているすべての人のために、公式のng-keyupディレクティブを使用してください：

<input type="text" ng-keyup="{expression}" />
于 2013-08-30T13:57:54.413 に答える
69

編集：新しい組み込みのng-keyupディレクティブを参照するmaklemenzからの以下の2番目の回答を参照してください

あなたはangular-uiライブラリを使うことができます：

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

編集：どのキーが押されたかを検出したい場合は、実際には2つの基本的なオプションがあります。ディレクティブに属性を追加して、ディレクティブ内で許可されたキーを処理するか、押されたキーをコントローラーに渡すことができます。一般的に、ディレクティブがキーメソッドを処理することをお勧めします。

両方の方法の例を次に示します。http：//jsfiddle.net/bYUa3/2

于 2012-06-29T18:41:07.210 に答える
7

デフォルトのディレクティブでは不十分な場合は、カスタムディレクティブを作成する必要があります。このようなものかもしれませんか？

<!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>
于 2012-06-29T18:37:20.143 に答える
5

すでに述べたイベントバインダーに加えて、AngularUIから次の便利な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

于 2013-04-09T00:34:46.300 に答える
5

私のように、特定のキーでのみイベントを発生させたいと思っている人を助けるためだけに。これは、escapeが押されたときにのみ関数ng-keyupを呼び出すを使用するコードです。cancel()必要なキーコードを見つけるには、このWebサイトを参照してください

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

@maklemenzが述べたように、これは現在利用可能な組み込みのAngularディレクティブを使用していることに注意してください

于 2014-11-26T16:54:43.143 に答える
0

参考までに-私は今日これを探していましたが、Angularのgithubにキーアップキーダウンの問題に対処するブランチがあるようです。

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

マスターにマージされました...ただし、1.1.3までリリースに表示されるようには見えません

ng-keyupオプションを使用してAngularを構築するには、gitからコードをダウンロードしrake packageて、フォルダーで実行します。もちろん、WindowsではNode.jsとRuby、そしておそらく他のフープをインストールすることを意味します（win32でフォークエラーが発生していました）

しかし、最終的には「組み込み」のキーアップを取得しました。

于 2013-01-31T20:21:38.777 に答える
0

私があなたの質問を正確に理解しているなら、あなたはng-keyupディレクティブを探しています。リンクは次のとおりです：http：//docs.angularjs.org/api/ng.directive：ngKeyup

于 2013-09-12T14:42:55.573 に答える
0

私の答えは遅すぎることは知っていますが、それが何人かの人々に役立つことを願っています。あなたが速くて簡単な方法を探しているなら、あなたはこれを使うことができます：

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

于 2018-08-10T23:14:22.800 に答える