是否有可能重写NG-提交？ [英] Is it possible to override ng-submit?

问题描述

我正在寻找一种方式来覆盖NG-提交，以便它评估/运行前pression它包含了之前执行某些功能。例如，我想做到以下几点。

I'm looking for a way to override ng-submit so that it performs some functions before evaluating/running the expression it contains. For example, I would like to do the following.

1）将所有字段脏（或者触摸），使得所有字段进行验证，即使用户已经跳过他们

1) Set all fields dirty (or perhaps touched) so that all fields are validated even if the user has skipped over them.

2）检查所有字段验证。如果没有，那么请不要继续。

2) Check that all fields validate. If not then don't continue.

3）如果有任何字段无效，则滚动的第一个无效字段和重点吧。

3) If any fields are invalid then scroll the first invalid field and focus it.

我发现，做一些这几个指令，创造一些新元素的指令，但没有真正覆盖/扩展ngSubmit所以我不知道这是否可能？

I have found a few directives that do some of this, some create new element directives but none actually override/extend ngSubmit so I'm wondering if this is possible?

推荐答案

首先，元素不必感动为验证工作（这是关于点＃1）。例如，这会使无效的投入，给予 $ scope.test =ABCD; 和

First, an element need not be "touched" for validation to work (that's about point #1). For example, this would invalidate the input, given $scope.test = "abcd"; and:

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

二，＃2很容易与的形式实现有效的$ ：

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

如果$ P $对提交逻辑更复杂然后这一点，就可以/应当在控制器完成，例如，在的onSubmit（）功能。

If pre-submit logic is more complicated then this, it could/should be done in the controller, for example, in the onSubmit() function.

但是，如果你的pre-提交逻辑是查看相关的（相对于视图模型相关的） - 和滚动的是的查看相关的 - 那么你可以创建另一个 ngSubmit 具有较高优先级和prevent默认提交事件处理指令：

But, if your pre-submit logic is View-related (as opposed to ViewModel-related) - and scrolling is View-related - then you could create another ngSubmit directive with higher priority and prevent default submit event handling:

.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这里重要的是由于链路功能执行的顺序。执行的顺序是：

Using pre-link is important here due to order of link function executions. The order of execution is:

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（提交。 ..）前的内置 ngSubmit 这样做，所以它可以有一次去在事件处理。

So, the use of higher priority and pre-link ensures that this directive registers element.on("submit", ...) before the built-in ngSubmit does it, so it can have a first go at event handling.

这篇关于是否有可能重写NG-提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！