angular,指令没有在通过json引入的内容上运行

时间:2014-12-02 16:14:16

标签: javascript json angularjs

一个奇怪的问题,我不确定发生了什么,所以我会尽量清楚。

我通过json对象引入html内容并将其放在div中。我遇到的问题是当我带来html通过一个指令运行javascript时,它似乎没有运行。例如 - 我正在玩这个http://cmaurer.github.io/angularjs-nvd3-directives/,一个用于角度的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将它带入时,似乎指令(或角度?)没有在它上面运行。

作为参考,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>',

然后就像这样绑定

ng-bind-html="widget.content"

这似乎工作正常,如果我检查元素,我可以看到坐在那里的正确的HTML。我的控制器里面有一个$ sce.trustAsHtml,以确保它被正确转义。

所以我不确定如何解决这个问题,因为没有抛出任何特定的错误,所以我不确定它是否有角度,指令或事件的顺序?有没有办法在html内容加载到div后重新初始化d3指令,例如这个?

我不确定从哪里开始,所以我非常感谢任何见解。谢谢你的阅读!

1 个答案:

答案 0 :(得分:2)

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

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