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

Question

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

Answer 1

如果您看一下W3C规范,那么看起来很明显的事情就是type='button'在您不希望它们提交时标记您的按钮元素.

值得特别注意的是它所说的地方

未指定type属性的button元素表示与其type属性设置为"submit"的button元素相同的元素

Answer 2

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

HTML:

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

JS:

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

Answer 3

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

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

启用将角度表达式绑定到onsubmit事件.

此外,它还可以防止默认操作(表单意味着将请求发送到服务器并重新加载当前页面).

Answer 4

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

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>所有其他标签一起使用

Answer 5

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