Angular obsługuje to po wyjęciu z pudełka. Próbowałeś już ngSubmit na swoim formularzu?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
EDYCJA: Zgodnie z komentarzem dotyczącym przycisku wysyłania , patrz Przesyłanie formularza przez naciśnięcie Enter bez przycisku wysyłania, co daje rozwiązanie:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Jeśli nie podoba Ci się rozwiązanie ukrytego przycisku przesyłania, musisz powiązać funkcję kontrolera ze zdarzeniem Enter lub naciśnięciem klawisza. Zwykle wymaga to niestandardowej dyrektywy, ale biblioteka AngularUI ma już skonfigurowane ładne naciśnięcie klawisza. Zobacz http://angular-ui.github.com/
Po dodaniu biblioteki angularUI lib kod będzie wyglądał następująco:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
lub możesz przypisać klawisz Enter do każdego pola.
Zobacz także następujące pytania SO dotyczące tworzenia prostej dyrektywy keypres:
Jak wykryć onKeyUp w AngularJS?
EDYCJA (2014-08-28): W momencie pisania tej odpowiedzi ng-keypress / ng-keyup / ng-keydown nie istniały jako natywne dyrektywy w AngularJS. W komentarzach poniżej @ darlan-alves ma całkiem dobre rozwiązanie z:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
ng-submit="join()"
dla kontrolera rejestracji, który miał$scope.join = function() {...}
i zmienił nazwę tej funkcji, aby ponowniefoo()
włączyć przesyłanie przycisku Enter.ng-keyup="$event.keyCode == 13 && myFunc()"
Naprawdę niesamowite :)Jeśli chcesz wywołać funkcję bez formularza, możesz użyć mojej dyrektywy ngEnter:
JavaScript :
HTML :
Przekazuję inne niesamowite dyrektywy na moim Twitterze i koncie GIST .
źródło
keydown
ikeypress
wydarzenia bez przecinka, aby oddzielić je oznacza zarówno może wystrzelić jednocześnie. Może to spowodować odrodzenie $ rootScope: błędy inprog. Dodanie przecinka między nimi powoduje rozłączenie i zapewnia, że występuje tylko cykl $ digest. Nie można zastosować zmiany, ponieważ jest to tylko jeden znak.Jeśli masz tylko jedno wejście, możesz użyć znacznika formularza.
Jeśli masz więcej niż jedno wejście lub nie chcesz używać znacznika formularza, lub chcesz dołączyć funkcję enter-key do określonego pola, możesz wstawić je do określonego wejścia w następujący sposób:
źródło
Chciałem czegoś bardziej rozszerzalnego / semantycznego niż podane odpowiedzi, więc napisałem dyrektywę, która pobiera obiekt javascript w podobny sposób do wbudowanego
ngClass
:HTML
Wartości obiektu są oceniane w kontekście zakresu dyrektywy - upewnij się, że są ujęte w pojedyncze cudzysłowy, w przeciwnym razie wszystkie funkcje zostaną wykonane po załadowaniu dyrektywy (!)
Na przykład:
esc : 'clear()'
zamiastesc : clear()
JavaScript
źródło
'vm.doTheThing("myVar")'
Innym podejściem byłoby użycie klawisza ng,
Prześlij dane po naciśnięciu Enter za pomocą AngularJS - jsfiddle
źródło
Bardzo dobra, czysta i prosta dyrektywa z obsługą shift + enter:
źródło
Jeśli chcesz także sprawdzania poprawności danych
Ważnym dodatkiem jest tutaj,
$loginForm.$valid
który zweryfikuje formularz przed wykonaniem funkcji. Będziesz musiał dodać inne atrybuty do weryfikacji, które wykraczają poza zakres tego pytania.Powodzenia.
źródło
Chciałem tylko zaznaczyć, że w przypadku posiadania ukrytego przycisku wysyłania możesz po prostu użyć dyrektywy ngShow i ustawić ją na false:
HTML
źródło
<button ng-show="false"></button>
jest jeszcze krótszy. Nie ma potrzeby ustawiania wartości niewidocznego przycisku.type="submit"
... Przypuszczam, że wartość można zignorować, ale uważam, że ta pierwsza jest konieczna.Użyj ng-upload i po prostu zawiń oba dane wejściowe w osobnych tagach formularza:
Zawinięcie każdego pola wejściowego we własnym znaczniku formularza pozwala ENTER na wywołanie przedłożenia w dowolnym formularzu. Jeśli użyjesz jednego tagu formularza dla obu, musisz dołączyć przycisk przesyłania.
źródło
Będzie nieco łatwiejsza przy użyciu klasy CSS zamiast powtarzania stylów wbudowanych.
CSS
HTML
źródło
FWIW - Oto dyrektywa, której użyłem dla podstawowego modalu bootstrap potwierdzenia / alertu, bez potrzeby
<form>
(po prostu wyłącz akcję kliknięcia jQuery dla tego, co chcesz i dodaj
data-easy-dismiss
do tagu modalnego)źródło