點擊按鈕將引發表單刷新的行為

Question

我在Angular中有一個表單，其中有兩個按鈕標籤。一個按鈕在ng-click上提交表單。另一個按鈕純粹用於使用ng-click進行導航。然而，當點擊這個第二個按鈕時，AngularJS會導致頁面刷新，觸發404錯誤。我在函數中設定了一個斷點，它會觸發我的函數。如果我執行以下任何操作，它就會停止：

1. 如果我移除ng-click，按鈕不會導致頁面重新整理。
2. 如果我在函數中註解掉程式碼，它不會導致頁面刷新。
3. 如果我將按鈕標籤更改為錨標籤（）並添加href=""，它就不會導致刷新。

後者似乎是最簡單的解決方法，但為什麼AngularJS在我的函數之後運行任何導致頁面重新加載的程式碼？看起來像是個bug。

這是表單：

<form class="form-horizo​​ntal" 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>

這是控制器方法：

$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'。

特別要注意的是它所說的位置