Cliquez sur un bouton dans un formulaire pour rafraîchir la page

j'ai une forme en angle qui a deux boutons tags en elle. Un bouton soumet le formulaire sur ng-click . L'autre bouton est purement pour la navigation en utilisant ng-click . Cependant, lorsque ce second bouton est cliqué, AngularJS provoque un rafraîchissement de la page qui déclenche un 404. J'ai fait tomber un point de rupture dans la fonction et ça déclenche ma fonction. Si je fais l'un des suivants, il s'arrête:

  1. si je supprime le ng-click , le bouton ne cause pas un rafraichissement de la page.
  2. si je commente le code dans la fonction, il ne provoque pas un rafraîchissement de page.
  3. si je change le bouton tag en anchor tag ( <a> ) avec href="" , alors il ne provoque pas un 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? Semble comme un bug.

Voici la forme:

<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";
};
194
demandé sur Xufox 2012-09-07 18:07:52

9 réponses

si vous regardez la spécification W3C , il semblerait que la chose évidente à essayer est de marquer vos éléments de bouton avec type='button' quand vous ne voulez pas qu'ils soumettent.

la chose à noter en particulier est où il est dit

un élément bouton sans attribut type représente la même chose qu'un élément bouton avec son attribut type défini à "submit "

421
répondu LOAS 2017-09-12 23:58:20

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
}
69
répondu antage 2012-09-10 16:02:51

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

De la ngSubmit docs http://docs.angularjs.org/api/ng.directive:ngSubmit

permet de lier des expressions angulaires aux événements d'onsubmit.

en outre, il empêche l'action par défaut (qui, pour le formulaire, signifie envoyer la requête au serveur et recharger la page actuelle).

18
répondu Shane Stillwell 2012-09-07 20:08:14

j'utilise la directive pour prévenir 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 puis, en html:

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

cette directive peut également être utilisée avec <a> et toutes les autres étiquettes

17
répondu pleerock 2014-02-05 12:56:01

vous pouvez conserver <button type="submit"> , mais vous devez supprimer l'attribut action="" de <form> .

5
répondu Anderson Ferreira 2016-02-07 06:25:49

je me demande pourquoi personne n'a proposé la solution la plus simple possible:

n'utilisez pas un <form>

Un <whatever ng-form> n'est à mon humble avis un meilleur emploi et sans un formulaire HTML, il n'y a rien à être soumis par le navigateur lui-même. Ce qui est exactement le bon comportement lors de l'utilisation angulaire.

2
répondu maaartinus 2016-03-23 00:03:53

cette réponse n'est peut-être pas directement liée à la question. C'est juste pour le cas où vous soumettez le formulaire en utilisant des scripts.

Selon ng-soumettre le code

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

il ajoute soumettre l'auditeur d'événement sur le formulaire. Mais le gestionnaire d'événements submit ne sera pas appelé lorsque submit est initié en appelant form.soumettre.)( Dans ce cas, ng-soumettre n'empêchera pas l'action par défaut, vous devez appelez preventDefault vous - même dans ng-submit handler;

pour fournir une réponse raisonnablement définitive, l'article 5 de l'algorithme de soumission du formulaire HTML stipule qu'un formulaire n'expédie un événement de soumission que s'il n'a pas été soumis en appelant la méthode de soumission (ce qui signifie qu'il n'expédie un événement de soumission que s'il est soumis par un bouton ou une autre méthode implicite, p.ex. en appuyant sur Entrée alors que l'accent est mis sur un élément de texte de type d'entrée).

voir Le formulaire soumis en utilisant submit () à partir d'un lien ne peut pas être saisi par le gestionnaire de contenu

1
répondu user1577263 2017-12-09 12:10:45

le premier bouton soumet le formulaire et le second ne

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>
0
répondu Amay Kulkarni 2015-07-02 09:13:24

ajouter action à votre formulaire.

<form action="#">

0
répondu Swapnil Patwa 2017-05-24 19:15:04