[英]How to trigger form submit programmatically in AngularJS?
从Angular的文档中可以看出, ngSubmit是提交表单的首选方式。 所有待处理的操作立即完成,并且也设置了$submitted
标志。 而听取ngClick
事件却没有同样的效果。
现在我需要提交一个包含热键的表单,其中包含ngSubmit
方法的所有ngSubmit
。 因此,我需要一些方法来触发标准提交工作流程。
我在DOM表单上尝试了submit()
并且它有效,但是附加到scope的angular的表单对象不包含对DOM表单的引用,因此我需要通过jqLite访问它:
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会侦听具有type="input"
的元素的click事件。
最终我决定触发该元素的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');
});
}
}
};
}
这个功能有没有开箱即用的解决方案?
只需在表单元素上使用事件.triggerHandler('submit')。
myApp.directive("extSubmit", ['$timeout',function($timeout){
return {
link: function($scope, $el, $attr) {
$scope.$on('makeSubmit', function(event, data){
if(data.formName === $attr.name) {
$timeout(function() {
$el.triggerHandler('submit'); //<<< This is Important
//equivalent with native event
//$el[0].dispatchEvent(new Event('submit'))
}, 0, false);
}
})
}
};
}]);
app.directive("form", function(){
return {
require: 'form',
restrict: 'E',
link: function(scope, elem, attrs, form) {
form.doSubmit = function() {
form.$setSubmitted();
return scope.$eval(attrs.ngSubmit);
};
}
};
});
HTML:
<form name="myForm" ng-submit="$ctrl.submit()" novalidate>
然后打电话给控制器
$scope.myForm.doSubmit();
你可以修改你的指令代码:
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() {
// Parse the handler of submit & execute that.
var fn = $parse(attr.ngSubmit);
$scope.$apply(function() {
fn($scope, {$event: e});
});
};
}
}
};
}
在这里你不必wu-submit
任何地方添加wu-submit
。 ng-submit
将有效。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.