javascript - 从自定义指令访问 ng-repeat 索引值

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() 返回一个名为“数据” 的对象数组，其中包含我有兴趣在嵌套对象中绘制的测量值。

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 的索引。