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

IT技术 javascript angularjs
2021-02-04 21:25:53

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

  1. 如果我删除ng-click，该按钮不会导致页面刷新。
  2. 如果我注释掉函数中的代码，它不会导致页面刷新。
  3. 如果我使用 将按钮标记更改为锚标记 ( <a>) href=""，则不会导致刷新。

后者似乎是最简单的解决方法，但为什么 AngularJS 甚至在我的函数之后运行任何导致页面重新加载的代码？好像是个bug。

这是表格：

<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";
};
6个回答

如果您查看W3C 规范，似乎显而易见的尝试是type='button'在您不希望按钮元素提交时标记它们。

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

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

我的按钮标有 type="button" 并且也有问题。在我的 ng-click 处理程序中，我有 $event.stopPropagation()。当我删除它时，它不会重新加载。不过我需要。任何想法为什么会导致页面重新加载？！
2021-03-18 21:25:53
我和 OP 有同样的问题，但我的按钮指定了类型 - 仍然单击会导致刷新。还有其他地方可以看吗？
2021-03-19 21:25:53
@freshfelicio：尝试添加$event.preventDefault()，这对我的情况有所帮助。但我没有解释为什么：-\
2021-03-29 21:25:53
这正是我正在寻找的。这在我的页面上很烦人，因为它应该只显示错误而不是提交。
2021-03-31 21:25:53
这向我表明您的问题出在 javascript 中。我的回答解决的问题更多是 dom 和浏览器之间的问题。一些 javascript 处理您的按钮点击可能会导致您看到重新加载。狩猎快乐;)
2021-04-03 21:25:53

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

html：

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

js：

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}
好的！它真的很适合我的场景！
2021-03-11 21:25:53
当在 SharePoint 表单中使用 AngularJS 时，这对我们有用。我确实必须添加“event.stopPropagation();” 也不过如此。
2021-03-25 21:25:53

您应该ng-submit={expression}在<form>标签中声明该属性。

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

启用绑定角度表达式以提交事件。

此外，它还可以防止默认操作（对于表单意味着将请求发送到服务器并重新加载当前页面）。

这对我不起作用。我完全按照指示去做。该页面仍然回帖
2021-03-13 21:25:53
提交表单并防止默认操作 由于表单在客户端 Angular 应用程序中的作用不同于传统的往返应用程序，浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载. 相反，应该触发一些 javascript 逻辑来以应用程序特定的方式处理表单提交。因此，除非 <form> 元素指定了 action 属性，否则 Angular 会阻止默认操作（向服务器提交表单）。- docs.angularjs.org/api/ng.directive:form
2021-03-14 21:25:53
我有一个带有 ng-submit={expression} 的表单和一个带有 type="submit" 的按钮。除了在 BB10 上工作正常。如果我使用 BB10 键盘的提交，则页面将刷新。如果我使用我在表单中声明的​​按钮，它可以正常工作。
2021-03-24 21:25:53
另外，请确保您没有在表单上设置 'action' 属性： form(action="/login", lng-submit="login()") 因为即使您设置了 ng-submit，这也会使页面刷新.
2021-03-26 21:25:53

我使用指令来防止默认行为：

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

然后，在 html 中：

<button class="secondaryButton" prevent-default>Secondary action</button>

该指令还可以与<a>所有其他标签一起使用

+1 谢谢！当您无权访问<form>标签并因此无法使用ng-submit指令时，这很有用。
2021-03-11 21:25:53
这也可以防止表单触发 ng-submit 回调，对吗？
2021-03-26 21:25:53
谢谢你，但我还需要取消指令中的 ng-click
2021-03-30 21:25:53

你可以保留<button type="submit">，但必须删除该属性action=""的<form>。

其它你可能感兴趣的问题
上一篇混合 Razor 和 Javascript 代码 下一篇如何通过类名获取元素？