Question

我正在尝试使用popover显示一些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>

这个plunkr有很多事情，但最重要的是当我点击表格中的任何“View”时，我希望report1.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。

无法在弹出窗口内呈现angularjs模板

1 个答案: