Chrome не отправляет форму при использовании директивы AngularJS на кнопке отправки

Question

Я написал директиву AngularJS, показанную ниже, которая отключает кнопку HTML при отправке формы или при нажатии кнопки и заменяет внутренний текст кнопки. Это прекрасно работает в IE и Firefox, но в Chrome код для изменения кнопки выполняется успешно, однако форма не будет отправлена, и на сервер не будет отправлено никакого запроса.

Пример кнопки HTML:

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

Директива AngularJS:

(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);
})();

Я использовал Fiddler для просмотра запросов и ответов и могу подтвердить, что при нажатии кнопки или отправке формы в Chrome не было сделано ни одного запроса. Любая помощь будет оценена.

Answer 1

Chrome не отправит форму, если вы в прикрепленном обработчике событий клика отключите элемент.

Использовать submit событие вместо:

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

    // Do stuff
});