Clicar em um botão em um formulário causa a atualização da página

Eu tenho um formulário no Angular que possui duas tags de botões. Um botão envia o formulário ng-click. O outro botão é apenas para navegação usando ng-click. No entanto, quando esse segundo botão é clicado, o AngularJS está causando uma atualização de página que aciona um 404. Soltei um ponto de interrupção na função e está acionando a minha função. Se eu fizer qualquer um dos seguintes, ele será interrompido:

1. Se eu remover ng-click, o botão não causará uma atualização da página.
2. Se eu comentar o código na função, ele não causará uma atualização da página.
3. Se eu alterar a tag button para uma tag anchor ( <a>) com href="", isso não causará uma atualização.

A última parece ser a solução mais simples, mas por que o AngularJS está executando algum código após a minha função que faz com que a página seja recarregada? Parece um bug.

Aqui está o formulário:

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

Aqui está o método do controlador:

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

Se você der uma olhada na especificação do W3C , parece que o mais óbvio é tentar marcar os elementos do botão comtype='button' quando você não deseja que eles enviem.

O que deve ser observado em particular é onde diz

Um elemento de botão sem nenhum atributo de tipo especificado representa a mesma coisa que um elemento de botão com seu atributo de tipo definido como "enviar"

Você pode tentar impedir o manipulador padrão:

html:

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

js:

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

Você deve declarar o atributo ng-submit={expression}em seu<form> tag.

Nos documentos do ngSubmit, http://docs.angularjs.org/api/ng.directive:ngSubmit

Permite vincular expressões angulares para submeter eventos.

Além disso, evita a ação padrão (que, por forma, significa enviar a solicitação ao servidor e recarregar a página atual).

Eu uso a diretiva para impedir o comportamento padrão:

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

E então, em html:

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

Esta diretiva também pode ser usada com <a>e todas as outras tags

Você pode manter <button type="submit">, mas deve remover o atributo action=""de <form>.

Eu me pergunto por que ninguém propôs a solução possivelmente mais simples:

não use um <form>

A <whatever ng-form>IMHO faz um trabalho melhor e sem um formulário HTML, não há nada a ser enviado pelo próprio navegador. Qual é exatamente o comportamento certo ao usar o angular.

Adicione ação ao seu formulário.

<form action="#">

Esta resposta pode não estar diretamente relacionada à pergunta. É apenas o caso quando você envia o formulário usando scripts.

De acordo com o código ng-submit

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

  event.preventDefault();
};

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

Ele adiciona o ouvinte de eventos de envio no formulário. Mas o manipulador de eventos de envio não seria chamado quando o envio for iniciado chamando form.submit (). Nesse caso, o ng-submit não impedirá a ação padrão; você deve chamar preventDefault você mesmo no manipulador do ng-submit;

Para fornecer uma resposta razoavelmente definitiva, o item 5 do Algoritmo de envio de formulários HTML declara que um formulário só envia um evento de envio se não tiver sido enviado chamando o método de envio (o que significa que ele só envia um evento de envio se enviado por um botão ou outro implícito pressionando enter enquanto o foco está em um elemento de texto do tipo de entrada).

Consulte O formulário enviado usando submit () de um link não pode ser capturado pelo manipulador de envio

O primeiro botão envia o formulário e o segundo não

<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 adicionar o arquivo FormsModulena importsmatriz app.module.tse adicionar import { FormsModule } from '@angular/forms';no topo deste arquivo ... isso funcionará.