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

Question

我试图让弹出窗口显示一些 html 内容(可能是 angularjs 编译的内容)，当我单击“查看”链接时，我没有看到我的自定义指令得到处理并正确显示(所有其他内容都是渲染正常，包括其中有一个 ng-repeat 的渲染，这表明 angularjs 正确地看到了我的 Angular 内容)

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

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

这个 plunkr 中发生了很多事情，但最重要的是，当我单击表内的任何“ View ”时，我希望 report1.html 的动态内容显示在我的工具提示中 - 显然所有其他内容内容显示出来，但不知何故未能完成我复杂的和弦布局渲染 - 和弦布局图渲染在另一个 plunkr 中独立测试 - http://plnkr.co/edit/q5DDdKHs11OuW6SfLtTG?p=preview

任何有助于确定为什么我的和弦布局图表未呈现的帮助都会有所帮助。

问候

Answer 1

您遇到问题是因为您使用 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 .