Angular 指令在首次加载时不更新 DOM答案

【问题标题】：Angular Directive not updating DOM on first loadAngular 指令在首次加载时不更新 DOM
【发布时间】：2016-11-23 10:10:42
【问题描述】：

我正在使用指令在数据数组上使用 ng-repeat 来实现不同的 D3 图。在创建 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

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

我没有设法解决问题本身，但通过使用 CSS 列为我的项目找到了解决方案。所有元素都已正确加载，实际上是在通过 D3 更改高度之后。

【讨论】：