将指令ng-model传递给uib-tooltip

时间:2017-05-09 20:02:58

标签: javascript angularjs angular-ui-bootstrap angular-ngmodel

我尝试创建自定义指令以生成ng-form的输入,并且这些输入应该能够根据当前在给定字段中的错误显示包含信息的工具提示。< / p>

我遇到的问题是尝试让工具提示模板能够读取自定义指令的ng-model,以查看它所在的字段何时为$invalid或者不显示绿色复选标记或特定表单错误消息。但是当字段内容发生变化时,指令中的ng-model似乎没有更新它的$invalid值。

https://plnkr.co/edit/sBKZgaGzFZtAz5Ntl2FD?p=preview

我已经将一个基本的plunker与指令和一些虚拟数据放在一起来说明。我希望当我退出输入中的所有内容时,所需的失效应该导致工具提示中的内容显示为true而不是false,因为失效现在应该是false。

如果有人可以帮助我理解这一点,那就太棒了。

1 个答案:

答案 0 :(得分:0)

通过你的例子,我在多个地方发现了问题:

<强> 1)import-input指令中,检查最大和最小长度的正确属性为ng-minlengthng-maxlength

<强> 2)index.html中,您应该将import-input指令包含在form中。这对于下一个问题至关重要,通常是正确验证的好主意。

第3) 检查输入字段是否无效时,我发现转到$$parentForm ctrl属性会显示该字段的valididty的正确值。表单对象具有每个子元素的属性,其属性名称与name属性相同。由于您在创建元素时动态生成name属性,因此可以使用此相同变量来处理$$parentForm中的元素。将范围设置为无效将如下所示:

scope.invalid = ctrl.$$parentForm[elementName].$invalid

我已经从您的版本中添加了一个带有这些更改的工作的plunker: 的 https://plnkr.co/edit/Ja7Wxqq6KWOk1IXXr7U0?p=preview