如何编写一个封装模板中输入的角度自定义指令？答案

【问题标题】：How to write an angular custom directive that encapsulates an input in the template?如何编写一个封装模板中输入的角度自定义指令？
【发布时间】：2014-10-01 09:19:38
【问题描述】：

我正在尝试编写一个角度指令，该指令基本上将输出标签和输入以及验证代码。当我这样做时，我会出现奇怪的行为。

首先，对于我的测试用例，我已经硬编码了我的指令以将 ng-minlength 放在输入上。当我这样做时，由于某种原因，模型没有绑定。如果我把它取下来，它会正确绑定。

其次，我已将 name 属性设置为自定义指令上指定的属性。这会阻止错误处理工作。

在这个 plunkr 中，我有一个正在发生的事情的例子：

http://plnkr.co/edit/BGxB5fENL5L6G7FcvPR5?p=preview

Label1 - 演示对 name 属性的硬编码如何导致错误处理起作用。它还演示了包含 ng-minlength 如何导致模型值不被绑定。
Label2 - 表明删除 ng-minlength 将允许绑定模型值。
Label3 - 说明动态绑定 name 属性会导致错误处理中断。

非常感谢您对此的任何帮助。我希望我只是错过了一些简单的东西，但我似乎找不到任何好的例子来说明如何做到这一点。

【问题讨论】：

检查这个库，看看它已经做了很多你正在寻找的东西：github.com/kelp404/angular-validator
感谢 JoseM。这可能有助于我正在尝试做的验证方面，但现在，我正在尝试获取一个指令，该指令将输出元素以表示整个提示和答案以及验证。主要是为了简化我的表单代码，因为我有很多类似的表单。

标签： javascript angularjs

【解决方案1】：

清空无效字段

根据https://groups.google.com/forum/#!topic/angular/fsvIhzEPvuA，您将获得 ng-minlength 的预期行为。如果您的初始值导致 ng-minlength 出现验证错误，则 ng-minlength 将其返回为未定义。（这解释了标签1和2字段没有值的问题）

缺少动态输入名称的验证信息

标签 2 和 3 的问题是 angular 不支持使用动态元素名称进行验证。看起来这是一些人遇到的问题，并试图让 Angular 做一些事情。这里有更多信息和解决方法：

AngularJS: Fields added dynamically are not registered on FormController

（这应该可以解释验证信息缺少表单标签字段 2 和 3 的问题）

【讨论】：

太棒了！这确实解释了为什么模型没有绑定到控件，我通过将模型的初始值设置为有效值来验证。但是，这仍然给我留下了 Label3 中的问题。您会在输出中注意到 value3 不包含 $error 的值。我希望它包含一个与 value1 相同的值。我错过了什么还是这是一个正确的假设？
我很高兴能帮上忙 =) 项目 2 和 3 没有任何验证数据的原因是因为它们具有动态名称。我已经用这些信息更新了我的答案。
感谢您的信息。我现在可以说出为什么不知道这种行为会如此令人沮丧。好消息是他们似乎已经在 1.3 中修复了这个问题，所以一旦我转移到那个版本，我就可以放弃我的解决方法。现在，我决定只在链接函数中 $compile() 我的指令模板，这显然解决了我的问题。感谢您的帮助！