Question

我正在创建一个角度指令，它附加到一个角形式并修改它的提交行为。如果表单不有效（显示错误，滚动页面等），我们的想法是检查有效性并做一些事情。我找到了一些代码来帮助解决这个问题，但我似乎无法找到如何重新创建ng-submit并在表单有效时使表单实际发布。我有自己的ng-submit属性版本，就像这样 - six4-submit =＆＃34; myController.myfunction（）＆＃34;所以我想这是一个评估指令成功部分内角度表达式的案例吗？

到目前为止，这是完整的代码，其中包含代码需要的注释。

.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 =＆＃34; mySubmit（）＆＃34;然后ngSubmit指令必须做一些事情来评估它包含的表达式，并在作用域上找到mySubmit函数并运行它。我只是想在我的指令中模仿这种行为。不幸的是，我无法在Angular github repo中找到ngSubmit代码。

编辑2：到达目的地

查看ng-submit的代码，看起来像这样的东西应该起作用

var callback = $parse(attrs.six4FormSubmit);

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

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

Answer 1

也许我错过了更重要的一点，但如果我理解你，你想在所有表格中添加一些应用程序范围的行为。你有很多方法：

1）复制ngSubmit代码并创建自己的ngSubmit - 类指令（不推荐，因为我没有看到分支代码的附加值< em>只有才能拥有自己的副本） - 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
     }
   }
}

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

1 个答案: