一尘不染

单击表单中的按钮可刷新页面

angularjs

我在Angular中有一个表单,其中有两个按钮标签。一键提交表单ng-click。另一个按钮仅用于使用进行导航ng- click。但是,当单击第二个按钮时,AngularJS导致页面刷新,从而触发404。我在函数中删除了一个断点,并触发了我的函数。如果我执行以下任何操作,它将停止:

  1. 如果删除ng-click,该按钮不会导致页面刷新。
  2. 如果我注释掉函数中的代码,则不会刷新页面。
  3. 如果我使用将按钮标签更改为锚标签(<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";
};

阅读 262

收藏
2020-07-04

共1个答案

一尘不染

如果您查看W3C规范,似乎很容易尝试做的事情是在type='button'不想提交按钮元素时标记它们。

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

未指定类型属性的按钮元素与将其类型属性设置为“提交”的按钮元素代表相同的事物

2020-07-04