Angular поддерживает это из коробки. Вы пробовали ngSubmit на элементе формы?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
РЕДАКТИРОВАТЬ: В соответствии с комментарием, касающимся кнопки отправки, см. Отправка формы нажатием кнопки ввода без кнопки отправки, которая дает решение:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Если вам не нравится решение для скрытой кнопки отправки, вам нужно привязать функцию контроллера к событию Enter keypress или keyup. Обычно для этого требуется пользовательская директива, но в библиотеке AngularUI уже есть хорошее решение для нажатия клавиш. Смотрите http://angular-ui.github.com/
После добавления библиотеки angularUI ваш код будет выглядеть примерно так:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
или вы можете привязать нажатие клавиши ввода к каждому отдельному полю.
Также см. Следующие вопросы о создании простой директивы keypres:
Как я могу обнаружить onKeyUp в AngularJS?
РЕДАКТИРОВАТЬ (2014-08-28): На момент написания этого ответа ng-keypress / ng-keyup / ng-keydown не существовало как собственные директивы в AngularJS. В комментариях ниже @ darlan-alves предлагает довольно хорошее решение:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
ng-submit="join()"
контроллер регистрации, у которого было,$scope.join = function() {...}
и изменил имя этой функции, чтобыfoo()
снова заставить работать кнопку ввода.ng-keyup="$event.keyCode == 13 && myFunc()"
Действительно здорово :)Если вы хотите вызвать функцию без формы, вы можете использовать мою директиву ngEnter:
Javascript :
HTML :
Я отправляю другие потрясающие директивы на мой твиттер и мою учетную запись .
источник
keydown
иkeypress
события , без запятой , чтобы разграничить их означает и может стрелять одновременно. Это может привести к появлению ошибок $ rootScope: inprog. Добавление запятой между ними создает дизъюнктивный и гарантирует, что происходит только цикл $ digest. Не удалось применить редактирование, так как это всего лишь один символ.Если у вас есть только один вход, вы можете использовать тег формы.
Если у вас более одного ввода, или вы не хотите использовать тег формы или хотите присоединить функциональность клавиши ввода к определенному полю, вы можете встроить его в определенный ввод следующим образом:
источник
Я хотел что-то немного более расширяемое / семантическое, чем данные ответы, поэтому я написал директиву, которая принимает объект javascript аналогично встроенному
ngClass
:HTML
Значения объекта оцениваются в контексте области действия директивы - убедитесь, что они заключены в одинарные кавычки, в противном случае все функции будут выполняться при загрузке директивы (!)
Так например:
esc : 'clear()'
вместоesc : clear()
Javascript
источник
'vm.doTheThing("myVar")'
Другой подход будет использовать нажатие клавиши NG,
Подайте ввод при нажатии Enter с AngularJS - jsfiddle
источник
Очень хорошая, чистая и простая директива с поддержкой shift + enter:
источник
Если вы тоже хотите проверить данные
Важным дополнением здесь является
$loginForm.$valid
проверка формы перед выполнением функции. Вам нужно будет добавить другие атрибуты для проверки, что выходит за рамки этого вопроса.Удачи.
источник
Просто хотел бы отметить, что в случае наличия скрытой кнопки отправки вы можете просто использовать директиву ngShow и установить для нее значение false, например, так:
HTML
источник
<button ng-show="false"></button>
еще короче. Не нужно устанавливать значение невидимой кнопки.type="submit"
Насколько я понимаю, для запуска директивы ng-submit ввод ... Я полагаю, значение можно игнорировать, но я считаю, что первое необходимо.Используйте ng-submit и просто оберните оба входа в отдельные теги формы:
Заключение каждого поля ввода в свой собственный тег формы позволяет ENTER вызывать submit в любой форме. Если вы используете один тег формы для обоих, вам нужно будет включить кнопку отправки.
источник
Будет немного аккуратнее с использованием класса CSS вместо повторения встроенных стилей.
CSS
HTML
источник
FWIW - вот директива, которую я использовал для базового модала подтверждения / предупреждения, без необходимости
<form>
(просто отключите действие jQuery click для всего, что вам нравится, и добавьте
data-easy-dismiss
в свой модальный тег)источник