角JS -劫持-提交并复制它的行为

Question

我正在创建一个角度指令，它连接到一个角形式，并修改它的提交行为。这样做的目的是检查有效性，并在表单无效时做一些事情(显示错误、滚动页面等)。我找到了一些代码来帮助解决这个问题，但是我似乎找不到如何重新创建ng-submit，如果表单是有效的，就让表单实际发布。我有我自己版本的ng-submit属性，它的工作方式是--64-mit=“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中找不到ngSubmit代码。

编辑2:达到目标

看一下ng-submit的代码，看起来像这样的东西应该能工作。

var callback = $parse(attrs.six4FormSubmit);

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

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

Answer 1

也许我忽略了更重要的一点，但是如果我理解你的话，你想要在所有的表单中添加一些应用程序的行为。您有许多方法：

1)复制ngSubmit代码并创建您自己的ngSubmit-like指令(不建议使用，因为我认为分叉代码只是为了得到您自己的副本)- 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
     }
   }
}