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

Question

I am trying to get a popover show some html content (it could be angularjs compiled content) and when I click on my "View" link, I do not see my custom directive getting processed and showing correctly (all other content is rendering okay including one that has an ng-repeat inside it suggesting that angularjs saw my angular content right)

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

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

There is a lot going on in this plunkr but the bottom line is when I click on any of the "View" inside the table, I expect dynamic contents of report1.html to show up in my tooltip - Clearly all the other contents show up but it somehow failed to do my complex chord layout rendering - The chord layout diagram rendering is tested independently in another plunkr - http://plnkr.co/edit/q5DDdKHs11OuW6SfLtTG?p=preview

Any help in determining why my chord layout chart is not rendering would be helpful.

Regards

Answer 1

You're having issues because you're using id for your chordLayoutHolder. To be honest, I'm not sure why this is an issue. Perhaps Angular pre-compiles the template and clones it, such that the id is no longer unique. I would be curious to know.

In any case, remove <div id="chordLayoutHolder"></div> and just append to the directive element:

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

Then, in your directive, change the following lines (that refer to chordLayoutHolder):

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

to:

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

to append to the element itself, rather than another placeholder.

Then it would work. Here's the plunker .