Le fait de cliquer sur un bouton dans un formulaire provoque un rafraîchissement de la page

Question

J'ai un formulaire dans Angular qui contient deux balises de boutons. Un bouton soumet le formulaire sur ng-click . L'autre bouton sert uniquement à la navigation en utilisant ng-click . Cependant, lorsque ce deuxième bouton est cliqué, AngularJS provoque un rafraîchissement de la page, ce qui déclenche une erreur 404. J'ai déposé un point d'arrêt dans la fonction et il déclenche ma fonction. Si je fais l'une des choses suivantes, elle s'arrête :

1. Si je retire le ng-click le bouton ne provoque pas de rafraîchissement de la page.
2. Si je commente le code dans la fonction, cela ne provoque pas de rafraîchissement de la page.
3. Si je remplace la balise du bouton par une balise d'ancrage ( <a> ) avec href="" alors il n'y a pas de rafraîchissement.

Cette dernière solution semble la plus simple, mais pourquoi AngularJS exécute-t-il un code après ma fonction qui provoque le rechargement de la page ? Cela ressemble à un bug.

Voici le formulaire :

<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

Si vous jetez un coup d'œil à la Spécification du W3C il semblerait que la chose la plus évidente à faire soit de marquer vos éléments de bouton avec le symbole type='button' quand vous ne voulez pas qu'ils se soumettent.

La chose à noter en particulier est le passage suivant

Un élément bouton sans attribut type spécifié représente la même chose qu'un élément bouton dont l'attribut type est défini sur "submit".

Answer 2

Vous pouvez essayer d'empêcher le gestionnaire par défaut :

html :

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

js :

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

Answer 3

Vous devez déclarer l'attribut ng-submit={expression} dans votre <form> étiquette.

Extrait de la documentation de ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Permet de lier des expressions angulaires aux événements onsubmit.

En outre, il empêche l'action par défaut (qui, pour le formulaire, signifie l'envoi de la demande au serveur et le rechargement de la page actuelle).

Answer 4

J'utilise une directive pour empêcher le comportement par défaut :

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

Et ensuite, en html :

<button class="secondaryButton" prevent-default>Secondary action</button>

Cette directive peut également être utilisée avec <a> et tous les autres tags

Answer 5

<a href="#pageone" class="ui-btn ui-icon-home ui-btn-icon-right ui-btn-icon-notext ui-btn-right" onClick="history.go(0)">Home</a>