Fare clic su un pulsante all'interno di un modulo provoca l'aggiornamento della pagina

Ho un modulo in Angular che contiene due tag pulsanti. Un pulsante invia il modulo ng-click. L'altro pulsante serve esclusivamente per la navigazione ng-click. Tuttavia, quando si fa clic su questo secondo pulsante, AngularJS sta causando un aggiornamento della pagina che attiva un 404. Ho lasciato cadere un punto di interruzione nella funzione e sta attivando la mia funzione. Se eseguo una delle seguenti operazioni, si interrompe:

1. Se rimuovo il ng-click, il pulsante non provoca un aggiornamento della pagina.
2. Se commento il codice nella funzione, non provoca un aggiornamento della pagina.
3. Se cambio il tag del pulsante in un tag anchor ( <a>) con href="", allora non provoca un aggiornamento.

Quest'ultimo sembra la soluzione più semplice, ma perché AngularJS sta eseguendo un codice dopo la mia funzione che fa ricaricare la pagina? Sembra un bug.

Ecco il modulo:

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

Ecco il metodo del controller:

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

Se dai un'occhiata alle specifiche del W3C , sembrerebbe ovvio provare a contrassegnare gli elementi del tuo pulsante type='button'quando non vuoi che vengano inviati.

La cosa da notare in particolare è dove si dice

Un elemento pulsante senza l'attributo type specificato rappresenta la stessa cosa di un elemento button con l'attributo type impostato su "submit"

Puoi provare a prevenire il gestore predefinito:

html:

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

js:

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

Dovresti dichiarare l'attributo ng-submit={expression}nel tuo <form>tag.

Dai documenti di ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Consente di associare espressioni angolari a eventi di invio.

Inoltre impedisce l'azione predefinita (che per modulo significa inviare la richiesta al server e ricaricare la pagina corrente).

Uso la direttiva per prevenire comportamenti predefiniti:

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

E poi, in HTML:

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

Questa direttiva può essere utilizzata anche con <a>tutti gli altri tag

È possibile mantenere <button type="submit">, ma è necessario rimuovere l'attributo action=""di <form>.

Mi chiedo perché nessuno abbia proposto la soluzione forse più semplice:

non usare a <form>

A <whatever ng-form>fa IMHO un lavoro migliore e senza un modulo HTML, non c'è nulla che possa essere inviato dal browser stesso. Qual è esattamente il comportamento giusto quando si usa angolare.

Aggiungi azione al tuo modulo.

<form action="#">

Questa risposta potrebbe non essere direttamente correlata alla domanda. È solo per il caso in cui si invia il modulo utilizzando gli script.

Secondo il codice ng-submit

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

  event.preventDefault();
};

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

Aggiunge listener di eventi di invio nel modulo. Ma il gestore eventi submit non verrà chiamato quando submit viene avviato chiamando form.submit (). In questo caso, ng-submit non impedisce l'azione predefinita, è necessario chiamare preventDefault nel gestore ng-submit;

Per fornire una risposta ragionevolmente definitiva, l'articolo 5 dell'algoritmo di invio del modulo HTML afferma che un modulo invia un evento di invio solo se non è stato inviato chiamando il metodo di invio (il che significa che invia un evento di invio solo se inviato da un pulsante o altro implicito metodo, ad esempio premendo Invio mentre lo stato attivo è su un elemento di testo di tipo input).

Vedere il modulo inviato utilizzando submit () da un collegamento non può essere rilevato dal gestore onsubmit

Il primo pulsante invia il modulo e il secondo no

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

Basta aggiungere l' FormsModulenella importsgamma di app.module.tsfile e aggiungere import { FormsModule } from '@angular/forms';nella parte superiore di questo file ... questo funzionerà.