директива возвращает тот же массив несколько раз angularjs

Question

Я пытаюсь показать Highcharts с нг-повтором , но отображает 1 графики в каждой строке Вот HTML:

<tr ng-repeat="perspective in perspectives"> 
       <td> 
        <highcharts-pie class="hc-pie" items="processed"></highcharts-pie> 
       </td> 
       <td>{{perspective.perfomance}}</td> 
       <td>{{perspective.current}}</td> 
       <td>{{perspective.previous}}</td> 
       <td>{{perspective.variance}}</td> 
      </tr> 

И данные в контроллере :

$scope.perspectives=[ 
     {perfomance:'A', 
     current:'0', 
     previous:'1', 
     variance:'-1', 
     plus:false, 
     graphData:[ 
      {value: 32.4}, 
      {value: 13.2}, 
      {value: 84.5}, 
      {value: 19.7}, 
      {value: 22.6}, 
      {value: 65.5}, 
      {value: 77.4}, 
      {value: 90.4}, 
      {value: 17.6}, 
      {value: 59.1}, 
      {value: 76.8}, 
      {value: 21.1} 
      ] 
     },{perfomance:'B', 
      current:'1', 
      previous:'0', 
      variance:'1', 
      plus:true, 
      graphData:[ 
      {value: 22.4}, 
      {value: 53.2}, 
      {value: 45.5}, 
      {value: 67.7}, 
      {value: 92.6}, 
      {value: 78.5}, 
      {value: 71.4}, 
      {value: 35.4}, 
      {value: 21.6}, 
      {value: 34.1}, 
      {value: 68.8}, 
      {value: 24.1} 
      ] 
}]; 
    $scope.processed = $scope.perspectives[0].graphData.map(function (elem, i) { 
    return [i, elem.value]; 
    }) 

Вот директива:

.directive('hcPie', function() { 
    return { 
    restrict: 'C', 
    replace: true, 
    scope: { 
     items: '=' 
    }, 
    controller: function ($scope, $element) { 
    }, 
    template: '<div id="container">not working</div>', 
    link: function (scope, element) { 
     var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: element[0], 
      height: 45, 
      type: 'column', 
      backgroundColor: null 
     }, 
     title: { 
      text: null 
     }, 
     subtitle: { 
      text: null 
     }, 
     xAxis: { 
      categories: [ 
      'Jan', 
      'Feb', 
      'Mar', 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
      ], 
      labels: { 
      enabled: false 
      }, 
      gridLineWidth: 0, 
      minorGridLineWidth: 0, 
      lineColor: 'transparent', 
      tickLength: 0 
     }, 
     yAxis: { 
      gridLineWidth: 0, 
      minorGridLineWidth: 0, 
      lineColor: 'transparent', 
      min: 0, 
      title: { 
      text: null 
      }, 
      labels: { 
      enabled: false 
      } 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 
      column: { 
      pointPadding: 0, 
      borderWidth: 0, 
      states: { 
       hover: { 
       color: '#FFFFFF' 
       } 
      } 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Value', 
      color: '#EC5B00', 
      data: scope.items 

     }], 
     exporting: { 
      enabled: false 
     } 
     }); 
     scope.$watch("items", function (processed) { 
     chart.series[0].setData(processed, true); 
     console.log(processed) 
     }, true); 
    } 
    } 
}); 

Я пытаюсь показать самостоятельный график для каждой строки, но все время показывает то же , что я пропустил?

Answer 1

$scope.processed определяется только один раз, и всегда будут обработаны graphData значения первого perspective.

Рассмотрим следующий раствор:

В контроллере:

$scope.process = function(graphData) { 
    return graphData.map(function (elem, i) { 
    return [i, elem.value]; 
    }); 
} 

При использовании директивы:

<tr ng-repeat="perspective in perspectives"> 
    <td> 
    <highcharts-pie class="hc-pie" items="process(perspective.graphData)"></highcharts-pie> 
    </td> 
    .... 
</tr> 

Answer 2

Вы не пробегаем по graphData, попробуйте использовать

perspective.graphData 

в нг-повторить