Как я могу обнаружить onKeyUp в AngularJS?

Как я могу обнаружить onKeyUp в AngularJS?

Я ищу директиву 'ngOnkeyup', подобную ngChange, но я не могу найти что-либо подходящее.

Если такой директивы нет, есть ли простой способ вызвать контроллер из собственного события onkeyup в браузере?

ОТВЕТЫ

Ответ 1

EDIT: см. второй ответ ниже от 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

Ответ 2

Для всех, кто ищет эту функцию сегодня, используйте официальную директиву ng-keyup:

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

Ответ 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>

Ответ 4

В дополнение к уже упомянутому связующемуся событию теперь вы можете использовать эти удобные директивы ui-key * из Angular UI:

<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

Ответ 5

Просто чтобы помочь кому-то, кто, как и я, хотел запустить событие только по определенному ключу. Вот код с помощью ng-keyup, который вызывает мою функцию cancel(), когда и только тогда, когда нажата escape. Чтобы узнать, какой кодовый код вы хотите посмотреть этот веб-сайт

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

Обратите внимание, что как упоминалось в @maklemenz, теперь используется встроенная директива Angular, доступная сейчас

Ответ 6

FYI - я просто искал это сегодня, и кажется, что есть ветвь в Angular github, которая обращается к проблеме keydown keydown.

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

Он был объединен с мастером... ОДНАКО, похоже, что он не появится в релизе до версии 1.1.3

Чтобы создать Angular с помощью опции ng-keyup, вы можете загрузить код из git и запустить rake package в папке. Конечно, в окнах это означает установку Node.js и Ruby и, возможно, некоторых других обручей (у меня были ошибки fork на win32)

Хотя, в конце концов, я получил "встроенную" клавиатуру.