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

Question

我有指令在 DOM 上呈现 d3 散点图指令。我还有一个 ng-bind 绑定到 array，它列出了为给定散点图提供的输入。这两个元素，散点图和输入，都在 span 和 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}]
        }
 ];

s.input 将数组绑定到 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() returns 匹配选择器的第一个元素。在这种情况下，它 returns 是转发器中的第一个 <scatter-template> 元素，这就是为什么所有 SVG 最终都出现在第一个 <scatter-template> 元素中的原因。

你要做的是：

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

d3.select() 也可以采用元素的直接实例。 Angular 指令中的 link() 函数接收指令元素的 jQuery 包装实例，因此我们可以通过 el[0].[=18 将原始元素传递给 D3 =]

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

Ng-repeat on directive creating duplicate DOM elements

javascript

angularjs

ng-repeat