javascript - Angular ，指令不在通过 json 引入的内容上运行

Question

这是一个奇怪的问题，我不太确定发生了什么，所以我会尽力说清楚。

我通过 json 对象引入 html 内容并将其放置在 div 中。我遇到的问题是，当我引入通过指令运行 javascript 的 html 时，它似乎没有运行。例如 - 我正在玩这个 http://cmaurer.github.io/angularjs-nvd3-directives/ ，一个用于 Angular 的 d3 指令。

如果我的模板上有 html，它就可以正常工作 - 我正在使用他们页面中的示例，如下所示 -

<nvd3-stacked-area-chart data="exampleData" id="exampleId" showXAxis="true" showYAxis="true" showControls="true" width="700" height="200"> <svg></svg> </nvd3-stacked-area-chart>

这在放置在页面上时工作正常，但是当我通过 json 将其引入时，似乎指令(或 Angular？)没有在其上运行。

作为引用，json 部分如下 -

  'content' : '<nvd3-stacked-area-chart data="exampleData" id="exampleId" showXAxis="true" showYAxis="true" showControls="true" width="700" height="200"> <svg></svg> </nvd3-stacked-area-chart>',

那么就这样绑定(bind)了

ng-bind-html="widget.content"

这似乎工作正常，如果我检查该元素，我可以看到那里有正确的 html。我的 Controller 中有一个 $sce.trustAsHtml 以确保它正确转义。

所以我不确定如何解决这个问题，因为没有抛出具体的错误，所以我不确定它是 Angular ，还是指令的，还是事件的顺序的？一旦 html 内容加载到 div 中，有没有办法重新初始化 d3 指令？

我不知道从哪里开始，所以我非常感谢任何见解。感谢您的阅读!

Answer 1

当您加载通过有线方式接收到的内容时，Angular 已经完成了页面的编译和链接。因此，你需要告诉它重新编译。看看这个 SO，并在收到内容并将其放入 div 后尝试手动调用 $compile:How do I make angular.js reevaluate / recompile inner html?

请记住，这是相当棘手的事情，您应该真正检查您正在做的事情的安全性。