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

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>';

您遇到的问题是,在创建隔离范围(范围{...})时,您无权访问父窗体或任何父窗口.IMO,这绝对是一件好事,因为您不希望您的指令硬编码父表单的名称,并且它将您的指令保持为独立单元.

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