点击表单内的按钮会导致页面刷新。

11 浏览
0 Comments

点击表单内的按钮会导致页面刷新。

我在Angular中有一个表单，其中有两个按钮标签。一个按钮在ng-click上提交表单。另一个按钮纯粹用于使用ng-click进行导航。然而，当点击这个第二个按钮时，AngularJS会导致页面刷新，触发404错误。我在函数中设置了一个断点，它会触发我的函数。如果我做以下任何一项，它就会停止：\n

    \n

  1. 如果我删除ng-click，按钮就不会导致页面刷新。

    2. \n

  2. 如果我将函数中的代码注释掉，它就不会导致页面刷新。

    3. \n

  3. 如果我将按钮标签更改为锚标签（），那么它就不会导致刷新。

    4. \n

\n后者似乎是最简单的解决方法，但为什么AngularJS会在我的函数之后运行任何导致页面重新加载的代码呢？看起来像是一个bug。\n这是表单：\n

\n这是控制器方法：\n

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

0

3 答案

0 Comments

点击表单内的按钮会导致页面刷新的原因是没有在

标签中声明ng-submit属性。通过查看ngSubmit文档，可以得知ng-submit属性的作用是绑定Angular表达式到onsubmit事件，并且阻止默认操作，即发送请求到服务器并重新加载当前页面。此外，还需要确保表单上没有设置'action'属性，因为即使设置了ng-submit，页面仍然会刷新。

解决方法是在

标签中添加ng-submit属性，并确保

标签上没有设置'action'属性。这样可以阻止表单的默认提交，使得表单提交不会触发页面的刷新。

根据Angular文档，由于客户端Angular应用中表单的作用与传统的往返应用程序中的表单不同，因此希望浏览器不将表单提交转化为发送数据到服务器并重新加载页面的完整页面刷新。相反，应该触发一些JavaScript逻辑来以应用程序特定的方式处理表单提交。因此，除非

元素指定了action属性，否则Angular会阻止默认操作（将表单提交到服务器）。

有用户表示，在使用ng-submit属性和type="submit"的按钮时，除了在BB10上，其他地方都正常工作。如果在BB10键盘上使用Submit按钮，则页面会刷新。但是，如果使用在表单中声明的按钮，则正常工作。

还有用户表示，按照文档中的说明操作仍然无效，页面仍然会提交。

0
0 Comments

点击表单内的按钮会导致页面刷新的原因是默认的事件处理程序会触发页面刷新。可以通过阻止默认事件处理程序来解决这个问题。具体解决方法如下：

在HTML中，给按钮添加ng-click属性，并将其绑定到一个函数上：

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

在JavaScript中，编写saveUser函数来处理按钮点击事件，并在函数中调用event.preventDefault()来阻止默认的事件处理程序的触发：

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

对于在SharePoint表单中使用AngularJS的情况，可能还需要添加event.stopPropagation()来停止事件的传播。

这种方法对我来说非常有效！

0
0 Comments

点击表单内的按钮会导致页面刷新，出现这个问题的原因是因为在HTML规范中，当button元素没有指定type属性时，它代表的是一个type属性被设置为"submit"的button元素。即使将button元素的type属性指定为"button"，仍然会导致点击按钮时页面刷新。

解决方法是在点击事件的处理函数中添加$event.preventDefault()代码，这样可以阻止按钮的默认行为，即阻止页面刷新。在某些情况下，还需要添加$event.stopPropagation()代码，以阻止事件继续传播。虽然不清楚具体原因，但在一些情况下这些代码能够解决问题。

0