angularjs - 自定义指令中的表单验证...？

Question

我有一个 HTML 表单，它是根据给定的“产品”对象及其所具有的字段动态构建的，允许用户修改关联的数据。我正在使用自定义“编辑器”指令来处理允许用户更新数据所需的 HTML 元素的创建。

示例如下:http://plnkr.co/edit/2fAVVpwTHFgxwTq4eAMI

首先，我不确定这是否是实现这一目标的最佳方法，但它(到目前为止)似乎工作正常。 (欢迎任何其他想法!)

但是，我想向控件添加验证规则，例如。 require 以便在输入留空时显示一条消息。我尝试将这些验证规则添加到代码中(如指令中的模板所示)，但它从未触发。我很确定这与我在某个地方交叉我的范围有关... AngularJS Batarang 在主范围上显示一个对象:

form: {
  {{fieldName}}: {}
}

这显然是错误的(而且是无稽之谈!)

Answer 1

将模板包装在自己的 ng-form 中:

textTemplate =  '<div ng-form="editor">' +
                  '<input id="{{fieldName}}" name="{{fieldName}}" type="text" ng-model="fieldData.data" required>' +
                  '<div ng-show="editor.$dirty && editor.$invalid">Invalid:' +
                      '<span ng-show="editor.$error.required">Some validation error!</span>' +
                  '</div>' +
                '</div>';

您遇到的问题是，在创建隔离范围 (scope { ... }) 时，您无权访问父表单或任何与此相关的父范围。 IMO，这绝对是一件好事，因为您不希望指令对父表单的名称进行硬编码，并且它使您的指令保持为一个独立的单元。

代码:http://plnkr.co/edit/qCjs16tuwVjSNzJdkk71?p=preview