Question

您好

我使用AngularJS制作了一个自定义html指令来绘制我从HTTP请求中获取的数据。

我遇到了一个问题，我无法访问ng-repeat的$ index属性来选择要绘制的返回数据中的相关数据集。

我的代码如下所示：

<div ng-controller="AppCtrl">
    <form class="sidebar" ng-submit="getData()">
         //some selection method
         <button type="submit">Select</button>

        </form>
    </div>
<chart ng-if="data" ng-repeat="item in data" id="{{ $index }}" val="data"></kpi-chart>

getData（）返回一个名为“data”的对象数组，其中包含我对嵌套对象中的绘图感兴趣的度量。

app.directive('chart',  function () {
//setup of initial object
    return {
    restrict: 'EA',
    terminal: true,
    scope: {
        val: '='
    },
    link: function (scope, element, attrs) {

        // Setup of SVG object on page

        var orig = newVal[$index];

我希望这个原型，最后，在上面的ng-repeat中引用 $ index ，使其绘制具有正确数据的图形，具有1个图形到1个数据集比率。

如何使ng-repeat $ index值可用于指令，以便它知道要访问哪个数据集？

Answer 1

您需要使用attrs.$observe来获取{{$index}}的值，以便监视插值。

<强>代码

attrs.$observe('id', function(newVal, oldVal){
    if(newVal) {
       console.log("Index of ng-repeat ", newVal)
    }
})

另一种替代方法是，您可以在隔离范围内拥有另一个可以具有索引值的变量。

<强>标记

<chart ng-if="data" ng-repeat="item in data" 
  id="{{$index}}" index="{{$index}}" val="data">
</chart>

<强>代码

scope: {
    val: '=',
    index: '@'
},

然后你可以在你的链接函数scope.index内访问ng-repeat的索引。

Answer 2

你可以使用attrs：

link: function (scope, element, attrs) {
    var ind = attrs['id'];
    var orig = newVal[ind];

从custom指令访问ng-repeat索引值

2 个答案: