En cliquant sur le bouton, le formulaire sera actualisé.

Question

J'ai un formulaire en Angular avec deux étiquettes de boutons. Un bouton soumet le formulaire en appuyant sur ng-click. L'autre bouton est uniquement destiné à la navigation à l'aide de ng-click. Cependant, lorsque ce deuxième bouton est cliqué, AngularJS provoque l'actualisation de la page, déclenchant une erreur 404. Je définis un point d'arrêt dans la fonction et cela déclenche ma fonction. Si j'effectue l'une des opérations suivantes, le système s'arrête :

1. Si je supprime ng-click, le bouton n'actualise pas la page. ≪/li>
2. Si je commente le code dans la fonction, la page ne s'actualise pas. ≪/li>
3. Si je remplace l'étiquette du bouton par une étiquette d'ancrage () et que j'ajoute href="", cela ne provoque pas de rafraîchir . ≪/li>

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

Voici le formulaire :

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <ensemble de champs>
    <div class="groupe-contrôle">
      <label class="control-label" for="passwordButton">Mot de passe</label>
      <div class="contrôles">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Changer</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Enregistrer</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 :

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

js :

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

Answer 2

Si vous regardez les spécifications W3C , il semble que la chose évidente à essayer est de marquer type='button' sur les éléments des boutons que vous ne souhaitez pas soumettre.

Portez une attention particulière à l'emplacement indiqué