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

Chrome 在提交按钮上使用 AngularJS 指令时不提交表单

Chrome doesn't submit form when using AngularJS directive on submit button

html

forms

google-chrome

directive

angularjs