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

Question

我有一个在 DOM 上渲染 d3 散点图指令的指令。我还有一个绑定(bind)到一个数组的 ng-bind，该数组列出了为给定散点图提供的输入。散点图和输入这两个元素都位于带有 ng-repeat 的 span 内部，如下所示:

<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}]
        }
 ];

s.input 将数组绑定(bind)到 DOM，s.chart 将图表对象传递给 scatter-template 指令。

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

在本例中，“GW”是 s.input 数组(每个数组都是 1 个数组)。

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

请查看 Chrome DevTools 中的以下内容，包装器的第一个实例 .saved-charts-repeat 包含所有图表，但仅包含一个输入。

为什么我的输入在整个重复过程中分散，但我的图表在第一个实例中却堆积起来？

编辑

这是我的 CSS

.saved-charts-repeat { //ngrepeat
  .inputs {
  }
  scatter-template {
    display: block;
  }
  svg {
    height: 300px;
    width: 300px;
    min-width: 320px;
  }

编辑2

这是一个重现我的问题的代码笔: 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 包装实例，因此我们可以通过 el[0] 将原始元素传递给 D3 .