javascript - 如何编写一个将输入封装在模板中的 Angular 自定义指令?

标签 javascript angularjs

我正在尝试编写一个 Angular Directive(指令),该指令本质上会输出标签和输入以及验证代码。当我这样做时,我会表现出奇怪的行为。

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

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

在这个 plunkr 中,我有一个关于正在发生的事情的示例:

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

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

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

最佳答案

清空无效字段

根据这个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 的问题)

关于javascript - 如何编写一个将输入封装在模板中的 Angular 自定义指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26130006/

相关文章:

Javascript Nodejs 值未插入数组

php - 将变量传递到 php 文件时出现问题

javascript - 如何将值从 ui-gmap-windows InfoWindow/Marker 传递到 ui-sref?

javascript - Ruby on Rails 和 Javascript

javascript - 如何将 JWPlayer 从 5.10 版本升级到 7

javascript - super 表达式必须为 null 或函数react-native 和 Realm DB

javascript - 在 AngularJS 中将一个 Controller 注入(inject)另一个 Controller 时出错

javascript - 通过合并对象属性在表中添加列

javascript - 如果值为空,ng-model 从对象中删除元素

javascript - AngularJs中如何将数据存储到对象中