Clicking the button will cause the form to refresh.

Question

I have a form in Angular with two button labels. A button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS causes the page to refresh, triggering a 404 error. I set a breakpoint in the function and it triggers my function. If I do any of the following, it stops:

1. If I remove ng-click, the button does not cause the page to refresh.
2. If I comment out the code in the function, it does not cause the page to refresh.
3. If I change the button label to an anchor label () and add href="" it does not cause a refresh .

The latter seems to be the easiest solution, but why does AngularJS run any code after my function that causes the page to reload? Looks like a bug.

This is the form:

<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>

This is the controller method:

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

Answer 1

You can try blocking the default handler:

html：

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

js：

$scope.saveUser = function (event) {
  event.preventDefault();
  // 你的代码
}

Answer 2

If you look at the W3C spec, it seems like the obvious thing to try is to mark type='button' on the button element that you don't want submitted.

Special attention should be paid to the location it says