Mam formularz w Angular, który zawiera dwa znaczniki przycisków. Jeden przycisk przesyła formularz na ng-click
. Drugi przycisk służy wyłącznie do nawigacji ng-click
. Jednak po kliknięciu tego drugiego przycisku AngularJS powoduje odświeżenie strony, które powoduje 404. Upuściłem punkt przerwania w funkcji i uruchamia moją funkcję. Jeśli wykonam jedną z poniższych czynności, przestanie to działać:
- Jeśli usunę przycisk
ng-click
, przycisk nie spowoduje odświeżenia strony. - Jeśli skomentuję kod w funkcji, nie spowoduje to odświeżenia strony.
- Jeśli zmienię tag przycisku na tag anchor (
<a>
) za pomocąhref=""
, nie spowoduje to odświeżenia.
To ostatnie wydaje się być najprostszym obejściem, ale dlaczego AngularJS uruchamia nawet dowolny kod po mojej funkcji, który powoduje przeładowanie strony? Wygląda na błąd.
Oto formularz:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Oto metoda kontrolera:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
javascript
angularjs
chubbsondubs
źródło
źródło
Odpowiedzi:
Jeśli spojrzysz na specyfikację W3C , wydaje się, że oczywistą rzeczą jest, aby spróbować oznaczyć elementy przycisków,
type='button'
gdy nie chcesz, aby były przesyłane.W szczególności należy zwrócić uwagę na to, co mówi
źródło
$event.preventDefault()
, co pomogło w moim przypadku. Ale nie mam wyjaśnienia, dlaczego: - \Możesz spróbować zapobiec domyślnemu programowi obsługi:
HTML:
js:
źródło
Powinieneś zadeklarować atrybut
ng-submit={expression}
w swoim<form>
tagu.Z dokumentacji ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit
źródło
Używam dyrektywy, aby zapobiec domyślnemu zachowaniu:
A następnie w html:
Tej dyrektywy można także używać ze
<a>
wszystkimi innymi tagamiźródło
<form>
tagu, a zatem nie możesz użyćng-submit
dyrektywy.Można zachować
<button type="submit">
, ale musi usunąć atrybutaction=""
z<form>
.źródło
Zastanawiam się, dlaczego nikt nie zaproponował możliwie najprostszego rozwiązania:
A
<whatever ng-form>
robi IMHO lepszą pracę i bez formularza HTML, sama przeglądarka nie ma nic do przesłania. To jest dokładnie właściwe zachowanie przy użyciu kątownika.źródło
ng-form=someForm
, dostajesz$scope.someForm
i ma$valid
pole. Mam więc wszystko, czego potrzebuję<button ng-disabled="!someForm.$valid">
.Dodaj akcję do formularza.
<form action="#">
źródło
Ta odpowiedź może nie być bezpośrednio związana z pytaniem. Dotyczy to tylko przypadku przesłania formularza za pomocą skryptów.
Zgodnie z kodem ng-upload
Dodaje on nasłuchiwanie zdarzenia przesłania w formularzu. Ale moduł obsługi zdarzeń wysyłania nie byłby wywoływany, gdy wysyłanie jest inicjowane przez wywołanie form.submit (). W takim przypadku ng-subm nie zapobiegnie domyślnej akcji, musisz sam wywołać preventDefault w module obsługi ng-subm;
Zobacz Formularz przesłany za pomocą subm () z linku nie może zostać przechwycony przez moduł obsługi onsubmit
źródło
Pierwszy przycisk przesyła formularz, a drugi nie
źródło
Wystarczy dodać
FormsModule
doimports
tablicyapp.module.ts
pliku i dodaćimport { FormsModule } from '@angular/forms';
w górnej części tego pliku ... to będzie działać.źródło