Chrome sendet kein Formular, wenn Sie die AngularJS-Anweisung zum Senden verwenden.

Question

Ich habe eine AngularJS-Direktive geschrieben, die eine HTML-Schaltfläche beim Senden des Formulars deaktiviert oder beim Klicken auf die Schaltfläche den inneren Text der Schaltfläche ersetzt. Dies funktioniert perfekt in IE und Firefox aber in Chrome der Code zum Ändern der Schaltfläche wird erfolgreich ausgeführt, aber das Formular wird nicht übergeben, und keine Anfrage an den Server gestellt.

Ein Beispiel für die HTML-Taste:

<button submit-button submit-title="Generating Report..." 
     type="submit" class="btn btn-primary"> 
     <i class="fa fa-database mr-xs"></i>Generate Report 
</button> 

Die AngularJS Richtlinie:

(function() { 

    function submitButton() { 
     return { 
       restrict: 'A', 
       require: '^form', 
       scope: { 
        submitTitle: '@' 
       }, 
       link: function ($scope, $element, $attributes) { 
        $element.on('click', function() { 
         var element = $element[0]; 
         element.innerHTML = element.innerHTML 
          .replace(element.innerText, $attributes.submitTitle); 
         element.disabled = true; 
         $element.addClass('disabled'); 
        }); 
       } 
      }; 
    } 

    angular.module('adminApp', []) 
     .directive('submitButton', submitButton); 
})(); 

ich verwendet habe Fiddler die Anfragen und Antworten zu überprüfen und es bestätigen kann keine Anfrage in Chrome gemacht ist wenn der Button angeklickt oder das Formular abgeschickt wird. Jede Hilfe wäre willkommen.

Answer 1

Chrome sendet das Formular nicht, wenn Sie das Element im angehängten Click-Ereignishandler deaktivieren.

Verwenden Sie das submit Ereignis statt:

$element.on('submit', function() { 

    // Do stuff 
});