點擊表單中的按鈕會導致頁面刷新

Question

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

1. 如果我刪除 ng-click，該按鈕不會導致頁面重新整理。
2. 如果我註解掉函數中的程式碼，則不會導致頁面刷新。
3. 如果我使用 href="" 將按鈕標記更改為錨標記 (<a>)，則不會導致刷新。

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

表格如下：

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

這是控制器方法：

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

Answer 1

您可以嘗試阻止預設處理程序：

html：

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

js：

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

Answer 2

如果您查看W3C 規範，看起來就像顯然，當您不希望按鈕元素提交時，可以嘗試使用 type='button' 來標記按鈕元素。

特別要注意的是它說的地方