重复角度指令

Question

我正在我的 index.html 页面中构建一个 Angular 指令：

<div bar-chart collectordata="safe.Nodes"></div>

这是拉入一组节点，这是我所期望的。在我的指令模板中，我正在重复元素，就像 API 调用返回的一样多的节点。

指令为每个指令正确吐出{{nodes.Label}} 标签。图表的id 正确地将基于 0 的数字添加到条形图文本中。

<div class="box quarter" ng-repeat="nodes in collectordata">
    <div class="label">{{nodes.Label}} <span>(<a href="#_">History</a>)</span></div>
    <div class="chart" id="{{'barchart' + $index}}"></div>    
</div>

我遇到的问题是在指令link: 函数中单独处理每个节点数组。

我试过了：

link: function (scope, element, attrs) {
    var test = scope.collectordata[$index];
});

它不会返回任何东西。当我只使用scope.collectordata 时，我得到了两个数组值。如何隔离数组中的一项以在指令的某些函数中使用？甚至像设置alert(n) 函数这样简单的事情。

我需要在link 内创建一个for 循环来访问这些值吗？

这是可行的，但不确定这是否是最佳做法

var items = scope.collectordata;

d3Service.d3().then(function (d3) {
    for (i = 0; i < items.length; i++) {
        var bar = d3.select("#barchart" + i)
        .select("div")
        .style('width', function () {
            return 100 * (items[i].Value / items[i].Max) + "%";
        })
        .text(items[i].Value);
    };              
});

Answer 1

$index 不适用于您的指令代码。它仅在内部范围内定义。

我认为您应该创建一个子指令并将所需的数据传递给它，例如 $index。

<div class="box quarter" ng-repeat="nodes in collectordata">
    <div collectordata-child="{{$index}}" class="label">{{nodes.Label}} <span>(<a href="#_">History</a>)</span></div>
    <div class="chart" id="{{'barchart' + $index}}"></div>    
</div>

collectordata-child.link 然后可以访问重复索引。

更新

.directive('myPane', function() {
  return {
    require: '^collectordata',
    restrict: 'A',
    scope: {
      index: '='
    },
    link: function(scope, element, attrs, collectordataCtrl) {
      collectordataCtrl...;
    }
  };