Question

我对Angular很新，但我已经爱上了它！我需要为向导编写几个可重用的组件。

我想从指令中的表单处理提交事件，这可能吗？

<form ng-submit="submit()" name="exampleForm">
    <foo data="someData"></foo> <!-- I need to handle the submit event in directive as well-->
    <input type="submit" id="submit" value="Submit"/>
</form>

如果用户按下Enter键或单击表单上的按钮，则指令必须调用后端并仔细检查数据。如果检查成功，表格将有效。

I built a simple example here

提前致谢！斯蒂芬

Answer 1

是的，这是可能的。

第一个问题是针对正确的$ scope。现在，您的代码以控制器上的submit()函数为目标。由于html元素的嵌套方式，<form>无法看到指令的$ scope。

由于您希望指令中的submit()，指令模板还应包含<form>元素和submit输入按钮。

调用foo将如下所示：

<foo data="someData" name="exampleForm"></foo>

如果您希望保持foo的方式（这是一种完全合法的方式），那么您将需要一个带有submit()函数的新指令。所以你有两个指令一起工作（非常有角度！很多哇！）。

Answer 2

您需要的是表单验证的自定义指令。自定义表单验证程序已添加到$validators上的ngModelController对象中。

对于“整数”指令的简单示例（可在“自定义验证”下的Angular docs here中找到），该指令将如下定义：

var INTEGER_REGEXP = /^\-?\d+$/; 
app.directive('integer', function() { return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.integer = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }   }; });

它会以这样的形式使用：

<form name="form" class="css-form" novalidate>
    <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br />
</form>

还有一个异步验证选项，将验证器添加到$asyncValidators对象。更多信息可在上述链接中找到。找到使用两者的工作示例here

Answer 3

这是一个有效的例子： http://plnkr.co/edit/sckCOq3a50PBjat2uixk?p=preview

我已经在指令的范围内创建了另一个双向绑定（称为＆＃34;提交＆＃34;），因此您可以指定提交函数的名称，因为它将从ExampleController的范围（我使用＆＃34; directiveSubmit＆＃34;这里）。

scope: {
    data: '=',
    submit: '='
},

<foo data="someData" submit="directiveSubmit"></foo>

该指令的控制器然后创建该函数并将其分配给自己的范围，并通过双向绑定的魔力将其分配给ExampleController的范围。

接下来，您可以从ExampleController的范围运行该提交函数，它实际上将引用指令中新创建的函数。

<form ng-submit="directiveSubmit(exampleForm)" name="exampleForm" novalidate>

请注意，我还将exampleForm传递给该函数。没有它，指令将难以访问它。

最后，我还在表单中添加了novalidate，因为如果您不这样做，某些浏览器（即Chrome）将以可能（或可能不会）的方式处理表单验证不受欢迎。在Chrome中尝试删除并提交，然后您就会明白我的意思（我还要求＆＃34;名称＆＃34;字段要求）。

处理指令中的提交事件

3 个答案: