Angular - 使用表单输入指令时的表单验证问题答案

【问题标题】：Angular - Form validation issues when using form input directiveAngular - 使用表单输入指令时的表单验证问题
【发布时间】：2013-03-04 02:12:51
【问题描述】：

我一直在尝试构建一个表单输入指令，它将根据模型和模型属性生成表单输入。例如，

如果字段是名称，类型是文本，该指令将返回一个输入 html 控件，
如果该字段是一个列表，那么它将返回一个选择框等等

这些输入是在视图中使用 ng-repeat 生成的。输入绑定到范围内的模型。这工作正常。但是，表单验证失败；即如果输入控件无效，主窗体仍然显示窗体有效。

我已经提出了一个简单的 plunkr 来说明这个问题 - http://plnkr.co/edit/R3NTJK?p=preview

注意：我实际上已经嵌套了表单，因为输入名称字段也是从范围模型动态生成的。

从过去 2 天开始，我一直在努力控制这件事，这真的让我发疯了。

我不确定我是否遗漏了什么。

如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

标签： angularjs validation

【解决方案1】：

更新：使用以下链接功能：

link: function linkFn(scope,elem,attr){
   var jqLiteWrappedElement = 
       angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
   elem.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
}

Plunker.

由于我不明白的原因，replaceWith() 必须在调用 $compile 之前执行。如果有人能解释为什么会这样，我们将不胜感激！

Update2：在下面的 cmets 中，Artem 提到在调用链接函数之前必须修改 DOM，所以这也是有效的：

var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);

原答案：

在你的指令中使用模板而不是链接函数：

template: '<input type="url" name="socialUrl" ng-model="social.url">'

【讨论】：

感谢您的意见。但是，我需要根据范围动态生成模板，即模板可以是输入-文本/收音机/复选框、选择、日期选择器等，具体取决于范围内可用的字段类型。在这种情况下，我无法对模板字符串进行硬编码，需要使用可以访问范围的链接函数来生成它。
@Gautham，我想出了如何让它在链接功能中工作，但我不完全明白为什么。查看更新的答案。
@MarkRajcok，嗨。感谢您的回答。我遇到了类似的问题，您的解决方案运行良好。但是我很好奇，你知道为什么必须在 $compile 之前调用 replaceWith 吗？
@Artem，不，我仍然不知道为什么。
@MarkRajcok，好的，我刚刚发现这与编译本身无关。这是关于喜欢编译 DOM 子树的范围。 $compile 在 replaceWith 之前没有链接也可以。 gist.github.com/armed/5369236