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

javascript angularjs

2022-08-30 00:57:28

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

如果我删除，该按钮不会导致页面刷新。ng-click
如果我注释掉了函数中的代码，它不会导致页面刷新。
如果我使用将按钮标记更改为锚点标记（），则不会引起刷新。<a>href=""

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

答案 1

如果你看了一下W3C规范，似乎很明显，当你不希望它们提交时，尝试用它们来标记你的按钮元素。type='button'

特别要注意的是它在哪里说

未指定 type 属性的按钮元素与 type 属性设置为“submit”的按钮元素表示相同的内容

答案 2

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

html：

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

js：

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