Ng-repeat on指令创建重复的DOM元素

Question

我有指令在DOM上呈现d3散点图指令。我还有ng-bind绑定到array，列出了为给定散点图提供的输入。这两个元素（散点图和输入）都位于带有span的{​​{1}}内，如下所示：

ng-repeat

<section> <h3>Saved Charts</h3> <div class="saved-charts-repeat" ng-repeat="s in savedCharts"> <p ng-bind="s.input"></p> <scatter-template input="s.chart"></scatter-template> </div> </section> ，赋予savedCharts的数组如下所示：

ng-repeat

$scope.savedCharts = [ { input: [[array], [array]], chart: [{object}, {object}, {object}] }, { input: [[array]], chart: [{object}, {object}] } ]; 将数组绑定到DOM，s.input将图表对象传递给s.chart指令。

当我运行它时，输出如下所示：

在这种情况下，'GW是scatter-template数组（每个数组都是1个数组）。

它们应该是内联的并且跨越页面。我检查了元素，发现所有图表都出现在s.input的第一个实例中，而ng-repeat正在适当地传播。

从Chrome DevTools看下面的内容，第一个包装器实例s.input包含所有图表，但只包含其中一个输入。

为什么我的输入会在整个重复过程中展开，但我的图表在第一时间被堆积起来？

修改

这是我的CSS

.saved-charts-repeat

修改2

这是一个重新创建我的问题的codepen： http://codepen.io/himmel/pen/pJwMEE

Answer 1

问题在于你的指令中的这行代码：

var svg = d3.select('scatter-template')

d3.select()返回与选择器匹配的第一个元素。在这种情况下，它会返回转发器中的第一个<scatter-template>元素，这就是为什么所有SVG都以第一个<scatter-template>元素结束的原因。

你想要做的是：

var svg = d3.select(el[0])

d3.select()也可以采用元素的直接实例。你的指令中的Angular link()函数接收一个jQuery包装的directive元素实例，所以我们可以通过el[0]将raw元素传递给D3。