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)函数一样简单。

我是否需要在for内创建link循环才能访问这些值？

这是有效的，但不确定这是否是最佳做法

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

重复Angular指令

1 个答案: