Kliknięcie przycisku w formularzu powoduje odświeżenie strony

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ć:

1. Jeśli usunę przycisk ng-click, przycisk nie spowoduje odświeżenia strony.
2. Jeśli skomentuję kod w funkcji, nie spowoduje to odświeżenia strony.
3. 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";
};

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

Element przycisku bez określonego atrybutu typu reprezentuje to samo, co element przycisku z atrybutem typu ustawionym na „prześlij”

Możesz spróbować zapobiec domyślnemu programowi obsługi:

HTML:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Powinieneś zadeklarować atrybut ng-submit={expression}w swoim <form>tagu.

Z dokumentacji ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Umożliwia wiązanie wyrażeń kątowych z zdarzeniami onsubmit.

Dodatkowo zapobiega domyślnej akcji (co dla formularza oznacza wysłanie żądania do serwera i ponowne załadowanie bieżącej strony).

Używam dyrektywy, aby zapobiec domyślnemu zachowaniu:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

A następnie w html:

<button class="secondaryButton" prevent-default>Secondary action</button>

Tej dyrektywy można także używać ze <a>wszystkimi innymi tagami

Można zachować <button type="submit">, ale musi usunąć atrybut action=""z <form>.

Zastanawiam się, dlaczego nikt nie zaproponował możliwie najprostszego rozwiązania:

nie używaj <form>

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.

Dodaj akcję do formularza.

<form action="#">

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

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

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;

Aby udzielić rozsądnie ostatecznej odpowiedzi, pozycja 5 formularza algorytmu HTML stwierdza, że ​​formularz wywołuje zdarzenie wysyłania tylko wtedy, gdy nie zostało przesłane przez wywołanie metody wysyłania (co oznacza, że ​​wywołuje zdarzenie przesłania tylko, jeśli zostanie przesłane przyciskiem lub innym niejawnym metoda, np. naciśnięcie Enter, gdy fokus znajduje się na elemencie tekstowym typu wejściowego).

Zobacz Formularz przesłany za pomocą subm () z linku nie może zostać przechwycony przez moduł obsługi onsubmit

Pierwszy przycisk przesyła formularz, a drugi nie

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

Wystarczy dodać FormsModuledo importstablicy app.module.tspliku i dodaćimport { FormsModule } from '@angular/forms'; w górnej części tego pliku ... to będzie działać.