我正在创建一个角度指令，该指令附加到角度形式并修改其提交行为。想法是检查有效性，如果表单无效（显示错误，滚动页面等），请执行一些操作。我已经找到了一些代码来帮助解决这个问题，但是如果表单有效，我似乎找不到如何重新创建ng-submit并使表单实际过帐的方法。我有自己的ng-submit属性版本，其工作方式如下-six4-submit =“ myController.myfunction（）”，所以我想这是在指令的成功部分中评估角度表达式的一种情况？
这是到目前为止的完整代码，并带有注释，说明代码需要去到哪里。
.directive('six4Form', function($log) {
return {
restrict: 'A',
scope: {
six4FormSubmit: '@',
},
require: 'form',
compile: function(element, attrs) {
// Auto set novalidate
if (!attrs.novalidate) {
element.attr('novalidate', '');
attrs.novalidate = true;
}
return {
// In the pre-compilation section so it gets run before
// any other submit functions.
pre: function(scope, element, attrs, formCtrl) {
// Submit function
element.bind('submit', function(event) {
if (formCtrl && !formCtrl.$valid) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
// Form IS valid
else {
// Code here should evaluate contents if attrs.six4FormSubmit and run it
}
});
}
}
}
};
});
编辑：让我重新措辞这个问题，因为它引起了一些混乱...
如果我要编写ng-submit =“ mySubmit（）”，则ngSubmit指令必须做一些事情来评估它包含的表达式，并在作用域上找到mySubmit函数并运行它。我只是想在我的指令中模拟这种行为。不幸的是，我在Angular github仓库中找不到ngSubmit代码。
编辑2：到达那里
查看ng-submit的代码，看来这样的事情应该起作用
var callback = $parse(attrs.six4FormSubmit);
scope.$apply(function() {
callback(scope, {$event:event})
});
不幸的是，它没有这样做，并且由于不产生任何错误而很难调试，只是它没有运行回调函数，而ng-submit却可以。
最佳答案
也许我错过了更大的意义，但是如果我了解您，则想在所有表单中添加一些应用程序范围的行为。您有多种方法：
1）复制ngSubmit代码并创建自己的类似ngSubmit的指令（不建议使用，因为我看不到分叉代码只是为了拥有自己的重复项而产生了附加值）-demo
2）保留ngSubmit并通过属性添加您自己的其他功能（例如scrollToInvalid）
<form name="form1" ng-submit="onSubmit()" scroll-to-invalid>
...
</form>
.directive("ngSubmit", function(){
return {
// ...
link: function(scope, element, attrs, formCtrl){
if (formCtrl && formCtrl.$invalid){
// ... similar to what you have in the question, plus
if (attrs.scrollToInvalid){
// implement scrolling
}
if (attrs.somethingElse){
// do something else
}
}
}
}
})
由于使用了该指令，因此保留了
ngSubmit的功能。3）即使您没有
ngSubmit，也可以创建自己的指令（如果该指令可以应用于表单）。您可以有条件地（通过检查ng-submit属性）应用其他逻辑（例如，防止在无效输入上提交）。<form name="form1" ng-submit="onSubmit()" super-form>
...
<div ng-form="innerFormWithSubmit" super-form>
</div>
</form>
.directive("superForm", function(){
function prelink(scope, element, attrs, formCtrl){
if (attrs.ngSubmit){
element.bind('submit', function(){
// ...
})
}
}
return {
require: "form",
link: {
pre: prelink
}
}
}