如何将动态弹出窗口附加到AngularJS中的某个元素?

时间:2015-12-03 19:10:24

标签: angularjs validation popover

简短说明

我们希望一个指令显示不同的内容(基于表单验证)。然后应将其附加到带有错误的相应字段(放在它旁边)。

背景

我们有一个通常的表格,有几个字段。一旦用户点击提交按钮,就会发生验证,如果出现任何问题,则应该发生这种情况:

  1. 加载某条消息,这应该是有效的电子邮件地址。'取决于字段/输入。
  2. 显示一个popover /工具提示,或者您在该字段旁边显示该消息。 - 这就是我的要求。
  3. 滚动到该元素
  4. 我想知道如何在2号中实现。这可以通过在每个字段中添加相应的popover声明来解决,但它应该是一种通用方法,其中验证应该知道要检查的字段然后处理弹出窗口。考虑不同应用程序状态下的多个表单,理想情况下应该在一个地方而不是多个地方管理内容,并且应该有一次调用验证方法以及一次调用show-popover方法。

    在AngularJS中,不应该对DOM进行操作,因此想法是有一个服务或指令或类似的东西加载弹出框并将其附加到相应的元素。

    你会怎么做?我的想法是在页面加载时有一个隐藏的popover指令。当验证发生时,应显示该值,然后使用$ position。

    这可能会变得混乱,因为必须考虑许多情况(即最右边的元素和右边的弹出窗口 - 用户无法看到弹出窗口)而且我不想要重新发明轮子。如果您回答这个问题,我们将非常感谢您的代码示例。

    这是去这里的方式还是有更好的解决方案?我更喜欢使用处理弹出功能的标准库 - 我们已经有mm-foundation工作了。那么如何动态地将它附加到输入字段而不在每个字段上编写popover-code来验证?

    在jQuery中执行此操作很简单,但AngularJS怎么样?

    谢谢。

1 个答案:

答案 0 :(得分:0)

如果在jQuery中执行它很容易,在AngularJS中是微不足道的;)

以下是一个例子:

<input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br />
<span ng-show="form.size.$error.integer">The value is not a valid integer!</span>

在AngularJS中,对于每个表单元素,您可以分配一组验证规则,如min-value,max-value,not null,e-mail等。当用户与提到的元素之间存在任何交互时,将自动触发验证。对于每个验证规则,都会触发一种错误。您只需要选择要处理的错误类型。然后你可以使用标签&#34; ng-show =&#39; condition&#39;&#34;显示弹出元素。它将在条件为真时显示,如您在ng-show =&#34; form.size。$ error.integer&#34;中所见。所有这些都是自动完成的。 您也可以创建自己的验证,但需要额外的几行代码。但不是那么难。

您可以参考此页面以了解有关我刚才所说的内容的更多信息:https://docs.angularjs.org/guide/forms