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

Question

Ich habe ein eckiges Formular mit zwei Knopfbeschriftungen. Senden Sie es mit einem Klick ng上的表单-click。另一个按钮纯粹用于使用 ng-click, um zu navigieren. Wenn jedoch auf die zweite Schaltfläche geklickt wird, veranlasst AngularJS eine Aktualisierung der Seite und löst einen 404-Fehler aus. Ich habe einen Haltepunkt in der Funktion platziert und er löst meine Funktion aus. Es stoppt, wenn ich eines der folgenden Dinge tue:

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 href="" 将按钮标记更改为锚标记 (<a> verwende, erfolgt keine Aktualisierung.

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

Das Formular lautet wie folgt:

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

Dies ist die Controller-Methode:

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

Answer 1

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

html：

js：

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

Answer 2

如果您查看W3C 规范，看起来就像显然，当您不希望按钮元素提交时，可以尝试使用 type='button' 来标记按钮元素。

特别要注意的是它说的地方