Угловая директива, не обновляющая DOM при первой загрузке

Question

Я использую директиву для реализации различных графиков D3 с использованием ng-repeat в массиве данных. В конце создания элементов D3 я вычисляю высоту графика и соответственно обновляю родительский DIV.

При открытии страницы при первом обновлении высоты родительского div. При переключении просмотров на другую категорию все работает нормально.

Повторение довольно прямо вперед, где «сетка-элемент» должен быть обновлен

<li ng-repeat="var in cards.variables" class="grid"> 
    <div class="grid-item" grid-block data="var"></div> 
</li> 

Это директива я использую для создания D3 элементов. Я попытался использовать scope. $ Apply() после рендеринга, но это приводит к уже запущенному $ digest. Использование $ timeout для визуализации графика также не имеет никакого эффекта.

.directive('gridBlock', function(d3Service, WrapService) { 
    return { 
    restrict: 'EA', 
    scope: { 
     data: '=' 
    }, 
    link: function(scope, element, attrs) { 
     d3Service.d3().then(function(d3) { 
     // Set dimensions 
     var width = 100; 
     var height = 0; 

     // Create d3 element 
     var svg = d3.select(element[0]) 
     .append('svg') 
      .attr('width', width) 

     scope.render = function(data) { 
      // Remove previous render 
      svg.selectAll('*').remove(); 

      var header = svg.append('text') 
      .text(data.value); 

      height += header.node().getBBox().height; 

      switch(data.variable.type) { 
      case 1: 
       // Absolute 
       var body = svg.append('rect') 
       .attr('y', height) 
       .attr('width', width) 
       .attr('height', 100) 
       .attr('fill', '#E6E7E8'); 

       height += body.node().getBBox().height + 10; 
       break; 
      case 2: 
      ... 
      break; 
      } 

      var desc = svg.append('text') 
      .attr('x', 0) 
      .attr('y', height) 
      .text(data.variable.label + ' in ' + data.year) 

      height += desc.node().getBBox().height; 
      width = desc.node().getBBox().width; 

      // Set dimensions on svg, width only when +100 
      svg.attr('height', height); 
      if (width > 100) { 
      svg.attr('width', width); 
      } 

      // Set dimensions on parent 
      element.css({'width': width + 'px', 'height': height + 'px'}); 
     }; 

     // Render visualisation 
     scope.render(scope.data); 

     }); 
    } 
    }; 
}) 

Смотрите фотографии примеров:

Graph elements with incorrect height

Graph elements with correctly updated height

Answer 1

мне не удалось решить саму проблему, но нашли решение для моего проекта, используя CSS столбцы. Все элементы правильно загружены, и это фактически теперь после изменения высоты через D3.