無法呈現popj內的angularjs模板

Question

我試圖讓popover顯示一些html內容（它可能是angularjs編譯的內容），當我點擊我的「查看」鏈接時，我看不到我的自定義指令獲取處理並正確顯示（其他所有內容渲染好包括一個具有裏面提示angularjs看到我的角度內容的權利的NG-重複）

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

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

有很多在這回事plunkr，但底線是當我點擊表格中的任何「視圖」時，我期望repor的動態內容t1.html顯示在我的工具提示中 - 顯然所有其他內容都顯示出來，但它以某種方式未能完成我複雜的和絃佈局渲染 - 在另一個plunkr中獨立測試和絃佈局圖渲染 - http://plnkr.co/edit/q5DDdKHs11OuW6SfLtTG?p=preview

任何幫助確定爲什麼我的和絃佈局圖不是渲染會有幫助。

問候

Answer 1

你，因爲你使用id您chordLayoutHolder有問題。說實話，我不知道爲什麼這是一個問題。也許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。