Cliquer sur un bouton du formulaire entraîne l'actualisation de la page

Question

J'ai un formulaire angulaire avec deux étiquettes de boutons. Soumettez en un clic ng上的表单-click。另一个按钮纯粹用于使用 ng-click pour naviguer. Cependant, lorsque vous cliquez sur le deuxième bouton, AngularJS provoque l'actualisation de la page, déclenchant un 404. J'ai placé un point d'arrêt dans la fonction et cela déclenche ma fonction. Il s'arrête si je fais l'une des choses suivantes :

1. Si je supprime ng-click, le bouton ne provoque pas l'actualisation de la page.
2. Si je commente le code dans la fonction, cela n'actualise pas la page.
3. Si j'utilise href="" 将按钮标记更改为锚标记 (<a>), cela ne provoque pas de rafraîchissement.

Cette dernière semble être la solution la plus simple, mais pourquoi AngularJS exécute-t-il même du code après ma fonction qui provoque le rechargement de la page ? On dirait un bug.

Le formulaire est le suivant :

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

Voici la méthode du contrôleur :

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

Answer 1

Vous pouvez essayer de bloquer le gestionnaire par défaut :

html :

js :

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

Answer 2

Si vous regardez la spécification W3C, il semble que vous puissiez essayer d'utiliser type='button' pour marquer l'élément du bouton lorsque vous ne souhaitez pas qu'il soit soumis.

Faites particulièrement attention à l'endroit où il est écrit