单击表单中的按钮会导致页面刷新

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：

js：

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

Answer 2

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

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