Formdaki bir düğmeyi tıklatmak sayfanın yenilenmesine neden olur

Angular içinde iki düğme etiketleri olan bir form var. Bir düğme formu gönderir ng-click. Diğer düğme sadece navigasyon içindir ng-click. Ancak, bu ikinci düğme tıklandığında, AngularJS, bir 404'ü tetikleyen bir sayfa yenilemesine neden oluyor. İşlevde bir kesme noktası bıraktım ve işlevimi tetikliyor. Aşağıdakilerden herhangi birini yaparsam durur:

1. ng-clickDüğmesini kaldırırsam, düğme sayfanın yenilenmesine neden olmaz.
2. İşlevdeki kodun yorumunu yaparsam sayfanın yenilenmesine neden olmaz.
3. Düğme etiketini bir tutturma etiketine ( <a>) değiştirirsem href=""yenilemeye neden olmaz.

İkincisi en basit geçici çözüm gibi görünüyor, ancak neden AngularJS sayfamın yeniden yüklenmesine neden olan işlevimden sonra herhangi bir kodu çalıştırıyor? Bir böcek gibi görünüyor.

İşte form:

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

Denetleyici yöntemi şöyledir:

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

W3C spesifikasyonuna bir göz attıysanız , denemek için bariz olan şey, düğme öğelerinizi type='button'göndermelerini istemediğinizde işaretlemektir .

Özellikle dikkat edilmesi gereken şey, söylediği yer

Tür özelliği belirtilmemiş bir düğme öğesi, tür özniteliği "gönder" olarak ayarlanmış bir düğme öğesiyle aynı şeyi temsil eder

Varsayılan işleyiciyi önlemeyi deneyebilirsiniz:

html:

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

js:

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

Sen niteliğini beyan etmelidir ng-submit={expression}senin içinde <form>etiketi.

NgSubmit dokümanlarından http://docs.angularjs.org/api/ng.directive:ngSubmit

Gönderim sonrası olaylara bağlayıcı açısal ifadeleri etkinleştirir.

Ayrıca, varsayılan eylemi (form için isteği sunucuya gönderme ve geçerli sayfayı yeniden yükleme anlamına gelir) önler.

Varsayılan davranışı önlemek için yönerge kullanıyorum:

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

Ve sonra, html'de:

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

Bu yönerge <a>ve diğer tüm etiketlerle de kullanılabilir

Sen tutabilir <button type="submit">, ancak niteliği kaldırmalısınız action=""arasında <form>.

Kimsenin neden en basit çözümü önermediğini merak ediyorum:

kullanma <form>

A <whatever ng-form>, IMHO'yu daha iyi bir iş yapar ve HTML formu olmadan, tarayıcının kendisi tarafından gönderilecek hiçbir şey yoktur. Açısal kullanırken tam olarak doğru davranış budur.

Formunuza eylem ekleyin.

<form action="#">

Bu cevap doğrudan soruyla ilgili olmayabilir. Bu sadece formu komut dosyaları kullanarak gönderdiğinizde geçerlidir.

Göre kod ng gönderin

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

  event.preventDefault();
};

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

Forma olay dinleyicisi gönderir. Ancak, form.submit () çağrılarak gönderme başlatıldığında gönderme olay işleyicisi çağrılmaz. Bu durumda, ng-send varsayılan eylemi engellemez, ng-send işleyicisinde preventDefault'u aramanız gerekir;

HTML Form Gönderme Algoritması öğesi 5, makul bir şekilde kesin bir yanıt sağlamak için, bir formun yalnızca bir gönderme olayı göndererek gönderilmesini bildirir (yani yalnızca bir düğme veya başka bir örtük tarafından gönderilmişse bir gönderme olayı gönderir) yöntem, örneğin odak bir giriş türü metin öğesindeyken enter tuşuna basmak).

Bkz . Bir bağlantıdan gönder () kullanılarak gönderilen Form, gönderen işleyici tarafından yakalanamıyor

İlk Düğme formu gönderir, ikinci Düğme vermez

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

Sadece eklemek FormsModuleiçinde importsdizisi app.module.tsdosyası ve eklemek import { FormsModule } from '@angular/forms';bu dosyanın en üstünde ... Bu çalışacaktır.