【问题标题】：Angular dynamically inserted directiveAngular 动态插入指令
【发布时间】：2014-02-13 20:07:35
【问题描述】：

我基于 angular + ng-ui-bootstrap + ng-googleCharts 构建了一个应用程序

我想在某个单元格中显示包含 ui.bootstrap 弹出框的谷歌图表数据表。我用数据库中的数据填充表格行。

我使用 angular $resource service 获取数据，然后使用函数解析数据，该函数还使用 popover angular 指令为 ui.bootstrap popover 创建 html 标记。但是这个弹出窗口不起作用。

我建议，这是因为插入到表中的数据需要由 Angular 重新编译。我在网上搜索并找到了使用 angular $compile 服务的解决方案。

我发现自定义指令，称为angular-html-bind，在每次绑定模型更改后重新编译该指令元素的内容，因此可以动态绑定其他角度指令以查看，但我不知道如何使用操作方式来自我的数据表中的angular-html-bind。

我创建了描述我的努力的 plunker。可悲的是，angular-html-bind 指令在该 plunker 中不起作用，我不知道为什么，但该 Plunker 包含所有必要的模块。

Plunker HERE

您能看到实现我期望目标的任何方法吗（即在数据表单元格中插入工具提示/弹出框）。

【问题讨论】：

【解决方案1】：

您的动态弹出框不起作用，因为指令 google-chart 具有隔离范围，所以我认为没有正确评估此行。

{v: $sce.trustAsHtml($scope.popover)}

【讨论】：

我不太确定，$sce.trustAsHtml 是否与该问题有关。我尝试使用 $sce 服务作为我的问题的解决方案，但它既不能使用它，也不能使用它。 AFAIK，$sce 仅防止转义，因此如果按钮在表格内呈现为 HTML 按钮，则该值不会被转义。我需要用 Angular 解析 HTML 代码，但我不确定，正确的 $sce 实现是否会有所帮助。

【解决方案2】：

好吧，我支持显而易见的解决方案 - 不要使用 Google 图表数据表，而是创建经典的引导样式 HTML 表并使用角度表达式填充它。

我尝试使用 google-chart 进行试验，但无论如何，它并没有遵循我的口头禅：KISS（“保持甜蜜和简单” - 这次可能是“保持简单，愚蠢！”的形式:)

【讨论】：