【问题标题】:Passing in directive ng-model to uib-tooltip将指令 ng-model 传递给 uib-tooltip
【发布时间】:2017-05-10 05:30:09
【问题描述】:

我正在尝试创建一个自定义指令来为 ng-form 生成输入,并且这些输入应该能够根据给定字段中当前存在的错误显示带有信息的工具提示。

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

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

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

如果有人能帮助我理解这一点,那就太好了。

【问题讨论】:

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


    【解决方案1】:

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

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

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

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

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

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

    【讨论】:

      猜你喜欢
      • 2017-12-16
      • 1970-01-01
      • 2014-05-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-04
      • 1970-01-01
      相关资源
      最近更新 更多