javascript - 无法在弹出窗口中渲染angularjs模板

我正在尝试使弹出窗口显示一些html内容（可能是angularjs编译的内容），当我单击“查看”链接时，我看不到自定义指令已得到处理并正确显示（所有其他内容都可以呈现，包括里面有一个ng-repeat的代码，表明angularjs看到我的角度内容正确）

http://plnkr.co/edit/Jy8Qlp1rsghwj4NNF2Dn?p=preview

<div ng-controller="ChordCtrl">
    <chord-layout chord-matrix="{{matrix}}">
       <div id="chordLayoutHolder"></div>
    </chord-layout>
</div>

这个插件有很多事情要做，但最重要的是，当我单击表内的任何“视图”时，我希望report1.html的动态内容显示在我的工具提示中-显然所有其他内容都会显示但是它以某种方式无法完成我复杂的和弦布局渲染-和弦布局图渲染在另一个plunkr中独立测试-http://plnkr.co/edit/q5DDdKHs11OuW6SfLtTG?p=preview

确定我的和弦布局图为何不呈现的任何帮助都将有所帮助。

问候

最佳答案

您遇到了问题，因为您为chordLayoutHolder使用了id。老实说，我不知道为什么这是一个问题。也许Angular会预先编译模板并将其克隆，以使id不再是唯一的。我很想知道。

无论如何，都删除<div id="chordLayoutHolder"></div>并追加到指令元素之后：

<chord-layout chord-matrix="{{matrix}}">
</chord-layout>

然后，在您的指令中，更改以下几行（引用chordLayoutHolder）：

$("#chordLayoutHolder").empty();
var svg = d3.select("#chordLayoutHolder")
...

至：

element.empty();
var domElement = angular.element(element)[0];
var svg = d3.select(domElement)
...

附加到元素本身，而不是另一个占位符。

然后它将起作用。这是plunker。