Избегайте ng-repeat изменения всех элементов, которые используют одну и ту же директиву - PullRequest
Новая
       15

Избегайте ng-repeat изменения всех элементов, которые используют одну и ту же директиву

0 голосов
/ 08 марта 2019

У меня есть директива angularjs с именем abx-gauge-chart-resizer, которая выполняет изменение некоторых объектов, повторяемых внутри ng-repeat. Вот код HTML: 

<li gridster-item="widget" abx-on-resize="$grid.updateChart(widget.name)" ng-class="{'selected': widget.chart.showPopup}"
  class="grid-item" ng-repeat="widget in $grid.widgets track by $index" id="widget-{{$index}}" abx-gridster-item-initialize
  abx-gridster-event-manager="$grid.updateWidget(widget)" abx-widget-watcher="$grid.updateWidget(widget)">
  <div class="gauge-container" ng-if="widget.chart.provider === 'gauge'" abx-gauge-chart-resizer widget="$grid.modifiedWidget"
    chart="widget.chart">
    <ng-gauge class="abxGauge" ng-if="widget.chart.data.max !== 0" abx-gauge-chart max="widget.chart.data.max" min="widget.chart.data.min"
      size="{{ widget.chart.options.size }}" type="{{ widget.chart.options.type }}" thick="{{ widget.chart.options.thick }}"
      value="widget.chart.data.avg" cap="{{ widget.chart.options.cap }}" label="{{$ctrl.chartReportType === 'rate' ? '' : ('ap.rqa.home.minutes' | translate) }}"
      foreground-color="{{ widget.chart.options.foregroundColor }}" background-color="{{ widget.chart.options.backgroundColor }}">
    </ng-gauge>
  </div>
</li>

и это код директивы: 

export default angular.module('fakiyaMainApp.directives.abxGaugeChartResizer', [])
  .directive('abxGaugeChartResizer', ($timeout)=>{
    return {
      restrict: 'A',
      scope: {
        widget: '=',
        chart: '='
      },
      link: function(scope){
        let mainChartSize = 150;
        let mainChartScale = 9;
        let resizeChart = function(){
          console.log(scope.chart);
          let widgetWidth = scope.widget.width;
          let widgetHeight = scope.widget.height;
          if((widgetWidth - widgetHeight) <= Math.floor(mainChartScale/2)){
            let scaleSize = widgetWidth >= mainChartScale ? widgetWidth / mainChartScale : mainChartScale / widgetWidth;
            scope.chart.options.size = Math.round(mainChartSize * scaleSize);
          }
          else{

          }
        };

        scope.$watch('widget', (newValue, oldValue)=>{
          if(newValue && oldValue && (newValue != oldValue)){
            $timeout(()=>{
              resizeChart();
            });
          }
        });
      }
    };
  })

По сути, эта директива проверяет значение widget внутри области и корректирует новые значения для chart в зависимости от значений размера widget.

Проблема в том, что ALL значения chart изменяются, когда я изменяю только один widget, вместо этого просто изменяя chart, который принадлежит выбранному widget.

Как мне этого избежать?

Заранее спасибо.

...