热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在AngularJS中以编程方式触发表单提交?

如何解决《如何在AngularJS中以编程方式触发表单提交?》经验,请帮忙看看怎么搞?

从Angular的文档中可以得出,ngSubmit是提交表单的首选方式。所有未完成的操作将立即完成,并且$submitted还将设置标志。聆听ngClick事件并不会产生相同的效果。

现在,我需要提交一个包含所有ngSubmit方法优点的热键表单。因此,我需要某种方式来触发标准提交工作流。

我尝试submit()使用DOM表单,但是它起作用了,但是附加到scope的angular的form对象不包含对DOM表单的引用,因此我需要通过jqLit​​e访问它:

var frm = angular.element('#frmId');
frm.submit();

我不喜欢这种在控制器代码中访问DOM的解决方案,因此我创建了一条指令:

function wuSubmit() {
    return {
        require: 'form',
        restrict: 'A',
        link: function(scope, element, attributes) {
            var scope = element.scope();
            if (attributes.name && scope[attributes.name]) {
                scope[attributes.name].$submit = function() {
                    element[0].submit();
                };
            }
        }
    };
}

$submit方法扩展表单对象。

两种变体由于未知原因均无法使用。form.submit()尝试发送数据,但不会阻止默认操作。


更新1
事实证明Angular侦听具有的元素的click事件type="input"
最终,我决定触发该元素的click事件:

wuSubmit.$inject = ['$timeout'];
function wuSubmit($timeout) {
    return {
        require: 'form',
        restrict: 'A',
        link: function (scope, element, attributes) {
            var submitElement = element.find('[type="submit"]').first();

            if (attributes.name && scope[attributes.name]) {

                scope[attributes.name].$submit = submit;
            }

            function submit() {
                $timeout(function() {
                    submitElement.trigger('click');
                });
            }
        }
    };
}

有没有针对此功能的现成解决方案?


推荐阅读
author-avatar
瑶看瀑布挂前川
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有