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

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

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

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

当前回答

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

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

允许将角表达式绑定到onsubmit事件。此外，它还防止了默认操作(对于表单来说，这意味着将请求发送到服务器并重新加载当前页面)。

2012-09-07 20:08:14

其他回答

这个答案可能和问题没有直接关系。它只适用于使用脚本提交表单的情况。

根据ng-submit代码

var handleFormSubmit = function（event） { scope.$apply（function（） { 控制器.$commitViewValue（）; 控制器.$setSubmitted（）; }); event.preventDefault（）; }; formElement[0].addEventListener（'submit'， handleFormSubmit）;

它在表单上添加提交事件侦听器。但是当通过调用form.submit()来启动submit时，submit事件处理程序将不会被调用。在这种情况下，ng-submit不会阻止默认动作，你必须在ng-submit处理程序中调用preventDefault;

为了提供一个合理的确定答案，HTML表单提交算法第5项规定，表单只有在调用submit方法未提交时才会分派提交事件(这意味着只有在通过按钮或其他隐式方法提交时才会分派提交事件，例如，当焦点放在输入类型文本元素上时按enter)。

参见使用submit()从链接提交的表单不能被onsubmit处理程序捕获

2017-12-09 12:04:12

如果你看一下W3C规范，当你不想让按钮元素提交时，尝试用type='button'标记按钮元素似乎是显而易见的。

需要特别注意的是上面写的地方

没有指定类型属性的按钮元素表示的内容与类型属性设置为“submit”的按钮元素相同。

2013-03-09 18:12:05

第一个按钮提交表单，第二个按钮不提交

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

2015-07-02 09:13:24

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

html:

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

js:

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

2012-09-10 16:02:51

我想知道为什么没有人提出可能最简单的解决方案:

不要使用<表单>

在我看来，一个<whatever ng-form>做得更好，没有HTML表单，浏览器本身就没有什么要提交的。这正是使用angular时的正确行为。

2016-03-23 00:03:53

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

推荐文章

最新文章

标签