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

Question

我有一个Angular的表单，里面有两个按钮标签。一个按钮提交ng-单击上的表单。另一个按钮是纯导航使用ng-单击。然而，当点击第二个按钮时，AngularJS会导致页面刷新，从而触发404。我在函数中删除了一个断点，它正在触发我的函数。如果我执行以下任何操作，它将停止：

1. 如果我删除ng单击，则该按钮不会导致页面刷新
2. 如果我注释掉函数中的代码，它不会导致页面刷新
3. 如果我将按钮标记更改为锚定标记（

后者似乎是最简单的解决方法，但为什么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

您应该在您的中声明属性ng-提交={表达式}

从NGS提交文档http://docs.angularjs.org/api/ng.directive:ngSubmit

启用将角度表达式绑定到onsubmit事件。

此外，它还阻止了默认操作（对于表单来说，这意味着向服务器发送请求并重新加载当前页面）。

Answer 2

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

html:

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

js:

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

Answer 3

如果你看一看W3C规范，那么最明显的尝试就是在你不想提交按钮元素时，用type='button'标记它们。

特别要注意的是它说

没有指定类型属性的按钮元素表示与其类型属性设置为“提交”的按钮元素相同的东西