如何将动态popover附加到AngularJS中的某个元素？ 简短描述

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

背景 我们有一个带有两个字段的常用表单。用户单击“提交”按钮后，将进行验证，如果出现任何错误，则应进行验证：

根据字段/输入，使用“这应该是有效的电子邮件地址”加载特定邮件

在该字段旁边显示弹出框/工具提示或以您所称的方式显示。-这就是我要问的

滚动到该元素

我想知道如何在数字2中实现。这可以通过在每个字段中添加相应的popover声明来解决，但是这应该是一种通用方法，验证应该知道要检查的字段，然后处理popover。考虑不同应用程序状态下的多个表单，理想情况下，内容应该在一个位置而不是多个位置进行管理，并且应该有一个对验证方法的调用以及一个对show popover方法的调用

在AngularJS中，不应该对DOM进行任何操作，因此我们的想法是使用服务、指令或类似的东西来加载popover并将其附加到相应的元素

你觉得这个怎么样？我的想法是在页面加载上有一个隐藏的popover指令。当进行验证时，应显示此信息，然后使用$position进行播放

这可能会变得混乱，因为需要考虑很多情况（例如，元素在最右边，popover放在右边-用户看不到popover），我不想重新发明轮子。如果您能回答这个问题，请提供一个代码示例

这是解决问题的方法还是有更好的解决方案？我更喜欢使用一个标准库来处理popover功能——我们已经有了mm foundation。那么，如何将其动态附加到输入字段，而无需在每个字段上编写popover代码进行验证

在jQuery中这样做很容易，但是AngularJS呢

---

谢谢。

如果用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>

{{size}}

该值不是有效的整数！

在AngularJS中，可以为每个表单元素分配一组验证规则，如最小值、最大值、非null、电子邮件等。当用户和所提到的元素之间存在任何交互时，验证将自动触发。对于每个验证规则，都会触发一种类型的错误。您只需选择要处理的错误类型。然后可以使用标记“ng show='condition'”来显示popover元素。当条件为真时，它将显示，如您在ng show=“form.size.$error.integer”中所见。所有这些都是自动为您完成的。 您也可以创建自己的验证，但这需要额外的几行代码。不过，这并不难

---

您可以参考本页了解更多关于我刚才所说的内容：

指向一个方向，但一个指令如何？使用您的解决方案，我仍然需要在所有位置添加x span标记。我的问题更多的是关于填写一条指令，然后将其附加到相关字段。这不是您最初的问题。你刚刚编辑了它。无论如何，编写指令仍然是可行的。从您的指令中，您可以检查对元素应用了哪些验证，并检查抛出的相应验证错误。Jodevan，我添加了前四行，因为您不理解我的意思，也为了让其他人更清楚。仍然没有成功：问题不在于错误，而在于创建一个popover指令并将其放置在应该附加到的字段旁边。有什么建议吗？