如何使用 angular-ui popover 附加元素

Posted 2023-05-09

【中文标题】如何使用 angular-ui popover 附加元素

【英文标题】：How to append an element with angular-ui popover

【发布时间】：2015-07-21 16:29:42

【问题描述】：

我有一个函数可以将 div 附加到表格中的每个单元格。你可以把它想象成一个表格，每个单元格都有一个 div。我通过以下方式做到这一点：

angular.element(document.getElementById()).append("<div>a</div>")

这绝对没问题。 但是，我需要这个附加的 div 有一个弹出框。这不起作用：

em.append("<div popover='text' popover-trigger='mouseenter'>a</div>")

在我看来，popover 指令只附加到页面渲染上的项目。指令不会跟踪之后添加的任何新项目。如何解决？

PS：如果我直接在 html 模板中添加相同的 div，弹出框就像一个魅力。

【问题讨论】：

只是好奇，在附加 html 后你是否重新编译了 dom？

这是 jQuery-ish 与 AngularJS 的对比。如果您在控制器中执行此操作，请不要 (code.angularjs.org/1.3.5/docs/guide/controller)。 DOM 操作应该发生在指令中。最好提供一个工作/非工作样本，然后你会得到更好的答案。不过，一般来说，您必须在调用 $compile 服务之前进行编译。

正如您所怀疑的，我错过了编译部分。添加了它，它现在工作正常。 @jme11 - 我完全同意你的看法。而且我讨厌在 AngularJS 中使用普通的 jQ，但 Angular 根本没有我需要的工具。请看这里 - ***.com/questions/30046763 我需要一个网格，稍后我会在其中添加元素 - 网格有数百个单元格。要以 Angular 方式执行此操作，我必须在应用程序内存中保留对每个单元格的引用。在我的解决方案中，我通过 ID 引用 DOM 对象。如果您有任何更好的想法，请告诉我 - 我当然可以使用！

实际上，基于该问题和您上面的评论，您似乎还真的不了解 Angular 的工作原理。这并不是侮辱，事实上，它提醒我，当我刚接触 AngularJS 时，我可能认为 jQuery 风格的方法也是唯一的方法。你所看到的一个非常复杂和资源密集型的应用程序在 AngularJS 中似乎是微不足道的，它有两个自定义指令和 ng-repeat。添加/删除条目只是更新范围的问题。或许可以发帖到codereview.stackexchange.com 以获取有关您的方法的一些建议。

2 个自定义指令和 ng-repeat 到底是什么意思？请提供更多详细信息 - 您的评论除了贬损之外没有任何价值

【参考方案1】：

您需要使用$compile 服务才能使其工作。如果你这样做，它应该可以工作：

em.append($compile("<div popover='text' popover-trigger='mouseenter'>a</div>")($scope));

【讨论】：

这就是答案。但是，我需要在每次追加后运行它吗？我在一个循环中添加了大量的 div。我可以在所有这些之后调用编译一次吗？还有，compile在这里做什么？？

我认为您也可以在完成对 DOM 的操作后在指令中编译整个 $element。我不确定这是否有效，但请尝试一下。阅读here 了解$compile 的作用。

添加工具提示也是如此。