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

在提交按钮

1 个答案: