Javascript Angular JS-劫持ng提交并复制它'；行为

我正在创建一个angular指令，它附加到angular表单并修改它的提交行为。其思想是检查有效性，如果表单无效，则执行一些操作（显示错误、滚动页面等）。我已经找到了一些代码来帮助实现这一点，但我似乎找不到如何重新创建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函数并运行它。我只是想在我的指令中模仿这种行为。不幸的是，我在github repo中找不到ngSubmit代码

编辑2:到达目的地

查看ng submit的代码，似乎类似的东西应该可以工作

var callback = $parse(attrs.six4FormSubmit);

scope.$apply(function() {
    callback(scope, {$event:event})
});

---

不幸的是，它不运行，而且调试也很困难，因为它不产生错误，它只是不运行回调函数，而ng submit运行回调函数。

也许我遗漏了更重要的一点，但如果我理解您的意思，您希望在所有表单中添加一些应用程序范围的行为。您有多种方法：

1） 复制

ngSubmit

代码并创建您自己的

ngSubmit

-类似指令（不推荐，因为我看不到仅仅为了拥有您自己的副本而分叉代码的附加值）——

2） 保留

ngSubmit

，并通过属性添加您自己的附加功能（例如

scrollToInvalid

）

<form name="form1" ng-submit="onSubmit()" scroll-to-invalid>
  ...
</form>

这将保留

ngSubmit

的功能，因为您正在使用该指令

3） 创建您自己的指令，如果它可以应用于表单，即使您没有

ngSubmit

。您可以有条件地（通过检查

ng submit

属性）应用附加逻辑（如防止对无效输入提交）

---

在我看来，这不是一个好方法，因为ngSubmit本身就是一个指令。而不是ngForm的功能。我建议您封装服务上的逻辑，并像往常一样将其绑定到ng submit。您无需执行任何操作-这不会覆盖内置的

ngSubmit

（因此需要

.stopImmediatePropagation

）。答案是：在我的新开发中，我实际上想使用我自己的“six4formsubmit”属性而不是ng submit。部分原因是我将制定两个单独的指令six4 form和six4 submit，部分原因是我可能希望将来以其他方式改变这种行为。因此，问题实际上是如何复制ng submit。我在angular github repo中搜索了ngSubmit，可以找到它的文档，但没有代码，这很奇怪。此外，我将它作为一个新问题发布，因为我的方法已经改变，在我的原始问题中，我试图覆盖ngSubmit，现在，我正试图在一个新的指令中完成这一切，该指令附加到angular表单上，处理的不仅仅是提交，因此我最初关于如何超越ngSubmit的问题（您友好地用使用优先级和预链接功能的简洁解决方案回答了这个问题）不再相关。我正在尝试构建一个JSFIDLE，以便将来更容易询问任何关于它的问题。@raulucco，OP的意图（从他的角度判断）是添加仅查看和应用程序范围的功能，这就是我建议这种方法的原因。

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

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