Durch Klicken auf eine Schaltfläche in einem Formular wird die Seite aktualisiert

Ich habe ein Formular in Angular, das zwei Schaltflächen-Tags enthält. Eine Schaltfläche sendet das Formular weiter ng-click. Die andere Schaltfläche dient ausschließlich zur Navigation ng-click. Wenn Sie jedoch auf diese zweite Schaltfläche klicken, führt AngularJS eine Seitenaktualisierung durch, die eine 404 auslöst. Ich habe einen Haltepunkt in der Funktion gelöscht und er löst meine Funktion aus. Wenn ich eine der folgenden Aktionen ausführe, wird sie gestoppt:

1. Wenn ich das entferne ng-click, bewirkt die Schaltfläche keine Seitenaktualisierung.
2. Wenn ich den Code in der Funktion auskommentiere, wird keine Seitenaktualisierung durchgeführt.
3. Wenn ich das Schaltflächen-Tag in ein Anker-Tag ( <a>) mit ändere href="", wird keine Aktualisierung durchgeführt.

Letzteres scheint die einfachste Problemumgehung zu sein, aber warum führt AngularJS nach meiner Funktion überhaupt Code aus, der das Neuladen der Seite bewirkt? Scheint wie ein Fehler.

Hier ist das Formular:

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

Hier ist die Controller-Methode:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

Wenn Sie sich die W3C-Spezifikation ansehen , ist es naheliegend, Ihre Schaltflächenelemente mit zu markieren, type='button'wenn Sie nicht möchten, dass sie gesendet werden.

Besonders zu beachten ist, wo es heißt

Ein Schaltflächenelement, für das kein Typattribut angegeben ist, entspricht einem Schaltflächenelement, dessen Typattribut auf "Senden" festgelegt ist.

Sie können versuchen, den Standardhandler zu verhindern:

html:

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

js:

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

Sie sollten das Attribut ng-submit={expression}in Ihrem <form>Tag deklarieren .

Aus den ngSubmit-Dokumenten http://docs.angularjs.org/api/ng.directive:ngSubmit

Aktiviert das Binden von Winkelausdrücken an Onsubmit-Ereignisse.

Außerdem wird die Standardaktion verhindert (was für das Formular bedeutet, dass die Anforderung an den Server gesendet und die aktuelle Seite neu geladen wird).

Ich benutze Direktive, um Standardverhalten zu verhindern:

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

Und dann in HTML:

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

Diese Anweisung kann auch mit <a>und allen anderen Tags verwendet werden

Sie können behalten <button type="submit">, müssen aber das Attribut action=""von entfernen <form>.

Ich frage mich, warum niemand die möglicherweise einfachste Lösung vorgeschlagen hat:

benutze kein a <form>

A <whatever ng-form>macht meiner Meinung nach einen besseren Job und ohne ein HTML-Formular kann der Browser selbst nichts einreichen. Welches ist genau das richtige Verhalten bei der Verwendung von Winkel.

Fügen Sie Ihrem Formular eine Aktion hinzu.

<form action="#">

Diese Antwort steht möglicherweise nicht in direktem Zusammenhang mit der Frage. Dies gilt nur für den Fall, dass Sie das Formular mithilfe von Skripten senden.

Laut ng-submit Code

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

  event.preventDefault();
};

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

Dem Formular wird der Listener für Übermittlungsereignisse hinzugefügt. Der Submit-Ereignishandler wird jedoch nicht aufgerufen, wenn Submit durch Aufrufen von form.submit () initiiert wird. In diesem Fall verhindert ng-submit die Standardaktion nicht. Sie müssen PreventDefault selbst im ng-submit-Handler aufrufen.

Um eine einigermaßen endgültige Antwort zu geben, gibt der HTML-Formularübermittlungsalgorithmus Punkt 5 an, dass ein Formular ein Übermittlungsereignis nur dann auslöst, wenn es nicht durch Aufrufen der Übermittlungsmethode übermittelt wurde (was bedeutet, dass es ein Übermittlungsereignis nur auslöst, wenn es über eine Schaltfläche oder ein anderes implizites Element übermittelt wird Methode, z. B. Drücken der Eingabetaste, während der Fokus auf einem eingegebenen Textelement liegt).

Siehe Formular, das mit submit () von einem Link gesendet wurde, kann vom onsubmit-Handler nicht abgefangen werden

Der erste Button sendet das Formular und der zweite nicht

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

Fügen Sie einfach das FormsModulein das importsArray der app.module.tsDatei ein und fügen Sie es import { FormsModule } from '@angular/forms';oben in diese Datei ein ... das wird funktionieren.