我在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";
};

当前回答

向表单添加动作。

<形式action = " # " >

其他回答

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

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

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

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

html:

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

js:

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

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

向表单添加动作。

<形式action = " # " >

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

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

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