Durch Klicken auf die Schaltfläche wird das Formular aktualisiert.

Question

Ich habe ein Formular in Angular mit zwei Schaltflächenbeschriftungen. Eine Schaltfläche sendet das Formular bei ng-click. Die andere Schaltfläche dient ausschließlich der Navigation mit ng-click. Wenn jedoch auf diese zweite Schaltfläche geklickt wird, veranlasst AngularJS eine Aktualisierung der Seite und löst einen 404-Fehler aus. Ich habe in der Funktion einen Haltepunkt gesetzt und er löst meine Funktion aus. Wenn ich einen der folgenden Schritte ausführe, stoppt es:

1. Wenn ich ng-click entferne, führt die Schaltfläche nicht zu einer Aktualisierung der Seite.
2. Wenn ich den Code in der Funktion auskommentiere, wird die Seite nicht aktualisiert.
3. Wenn ich die Schaltflächenbeschriftung in eine Ankerbeschriftung () ändere und href="" hinzufüge, wird kein a verursacht Aktualisierung .

Letzteres scheint die einfachste Lösung zu sein, aber warum führt AngularJS nach meiner Funktion Code aus, der dazu führt, dass die Seite neu geladen wird? Sieht aus wie ein Bug.

Dies ist das Formular:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Passwort</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()">Speichern</button>
    </div>
  </fieldset>
</form>

Dies ist die Controller-Methode:

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

Answer 1

你可以尝试阻止默认处理程序：

html：

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

js：

$scope.saveUser = function (event) {
  event.preventDefault();
  // 你的代码
}

Answer 2

如果你查看W3C规范，似乎显而易见的尝试是在你不想要提交的按钮元素上标记type='button'。

特别要注意的是它所说的位置