Angular UI Bootstrap - 从 DOM 中删除触发元素时无法删除弹出框答案

【问题标题】：Angular UI Bootstrap - Cannot delete popover when triggering element is removed from DOMAngular UI Bootstrap - 从 DOM 中删除触发元素时无法删除弹出框
【发布时间】：2016-09-07 15:57:41
【问题描述】：

我正在使用一个 javascript 库，当某些数据更新时，该库将向 DOM 添加/删除元素。
为了向 DOM 添加新元素，它调用返回元素的模板函数。在我的例子中，模板函数在 angular 指令中定义并返回类似 return $compile(html)(scope)[0]; 的内容，因为我需要在添加的元素中使用 UI Bootstrap Popover 指令。
对于 Popover，我需要使用 popover-append-to-body="true"。

我的问题是，如果触发元素从 DOM 中移除，则弹出框永远不会被移除。因此，如果我们添加一个新的触发元素，第二个弹出框将被附加到 body 等。

这是一个简化的例子：http://plnkr.co/edit/AFsXBcaLBAs0F2garbAu?p=preview
单击“单击”按钮打开弹出框，单击“删除”删除“单击”按钮，单击“添加”重新添加“单击”按钮，再次单击“单击”将第二个弹出框添加到 DOM。

当触发元素从 DOM 中移除时，如何移除 Popover 指令？
我需要完全删除它，不仅隐藏它/从 DOM 中删除它（我可以用 popover-is-open 隐藏它，但是当它设置回 true 时，我看到弹出框仍然存在）。
有没有办法在将要删除的元素的 Popover 指令上调用 destroy ？

【问题讨论】：

不要在控制器中进行 DOM 操作，您可能需要重新设计代码
@svarog 这只是一个展示弹出框问题的简单示例。在我的实际代码中，我没有在控制器中进行 DOM 操作，但我使用的是（不是角度的）库（顺便说一下，我从角度指令内部调用）。问题是“按钮”是由这个库创建并添加到 DOM 中的，所以我不能将它们的状态保存在数组中。我在我的例子中写成 vanilla js 是我在实际应用程序中无法用 angular 控制的。
那么你有一个完全不同的问题。您需要将该按钮生成代码导入指令内的链接函数并在其上保留$watch，并在其上保留$apply 以进行更改

标签： angularjs angular-ui-bootstrap popover destroy

【解决方案1】：

您不应该在控制器中进行 DOM 操作，无论是在 JS 还是 HTML 中，这就是指令适用的原因，对于您的情况，您可以使用几个内置指令。

您应该保留一个数组来表示您的按钮和弹出框状态
您应该将所有 JS 代码放在控制器中，并使用 ng-click 将点击事件绑定到控制器中的函数
当你有ng-click时不要使用onclick
Angular API 的工作方式与 vanilla JS 甚至 jquery 完全不同，所以不要混合使用它们，使用 Angular 提供的内容，请参阅文档以获取帮助。

Here is your "revamped" code

【讨论】：