javascript - 是否可以覆盖 ng-submit？

Question

我正在寻找一种方法来覆盖 ng-submit，以便它在评估/运行它包含的表达式之前执行一些功能。例如，我想做以下事情。

1) 将所有字段设置为脏字段(或可能已触及)，以便即使用户跳过了所有字段，也会验证所有字段。

2) 检查所有字段是否有效。如果没有，请不要继续。

3) 如果任何字段无效，则滚动第一个无效字段并将其聚焦。

我发现了一些指令可以执行其中的一些操作，其中一些指令创建新的元素指令，但实际上没有一个指令覆盖/扩展 ngSubmit，所以我想知道这是否可能？

Answer 1

首先，不需要“触摸”元素即可进行验证(这就是第一点)。例如，这将使输入无效，给定 $scope.test = "abcd"; 和:

<input ng-model="test" ng-maxlength="3">

其次，#2 可以通过 form.$valid 轻松实现:

<form name="form1" ng-submit="form1.$valid && onSubmit()">
  ...
</form>

如果预提交逻辑比这更复杂，它可以/应该在 Controller 中完成，例如在 onSubmit() 函数中。

但是，如果您的预提交逻辑与 View 相关(而不是与 ViewModel 相关) - 并且滚动与 View 相关 - 那么您可以创建另一个 ngSubmit 具有更高优先级的指令并阻止默认提交事件处理:

.directive("ngSubmit", function() {
  return {
    require: "?form",
    priority: 10,
    link: {
      pre: function(scope, element, attrs, form) {
        element.on("submit", function(event) {        
          if (form && !form.$valid) {
            event.stopImmediatePropagation();
            event.preventDefault();

            // do whatever you need to scroll here
          }
        })
      }
    }
  }
});

<强> Demo

编辑:

由于链接函数执行的顺序，使用 pre-link 在这里很重要。执行顺序为:

1. pre-link of parent or higher priority directive
2. pre-link of child or lower priority directive
3. post-link of child or lower priority directive
4. post-link of parent or higher priority directive

因此，使用更高的优先级和 pre-link 可确保该指令在内置元素之前注册 element.on("submit", ...) ngSubmit 做到了这一点，因此它可以首先进行事件处理。