生成的 SVG 元素的动态 AngularJs 指令答案

【问题标题】：Dynamic AngularJs directive by generated SVG element生成的 SVG 元素的动态 AngularJs 指令
【发布时间】：2015-04-12 03:30:44
【问题描述】：

我有一个带有 AngularJs 指令的 HTML 标记，例如：

<div line-chart></div>

它调用一个生成 SVG 对象及其相关子元素的指令。用于创建子元素的函数：

function drawDataPoints(params){
  function drawDataPointCircles() {
    var dataPointAttributes = {
      'class': 'data-point negative' 
    };

    params.svg.selectAll('circle data-point')
      .enter()
      .append('circle')
      .attr('label-visible', '');
  }
  drawDataPointCircles();
}

这个指令的输出是：

<svg class="chart">
  <g>
    <circle class="data-point negative" label-visible=""></circle>
  </g>
</svg>

你可能注意到有一个label-visible 应该调用下面的指令：

angular.module('myApp')
  .directive('labelVisible', function () {
    debugger;
    return {
      restrict: 'A',
      link: function(scope, element){

      }
    };
  });

但不幸的是，labelVisible 指令已执行，但 link 函数从未被调用。有谁知道生成svg元素时如何调用labelVisible？

【问题讨论】：

在将其附加到 DOM 之前，您需要使用 $compile 服务对其进行编译。

标签： angularjs svg d3.js

【解决方案1】：

感谢@Ethan Jewett 提示使用$compile 服务。

终于解决了问题。问题是在渲染 SVG 元素时，它被渲染为普通字符串，而不是绑定到 DOM。因此该指令永远不会被调用。所以，我需要做的是为每个生成的元素调用一个 $compile 函数，正如@Ethan 所建议的那样，它会起作用，比如：

    var point = params.svg.selectAll('circle data-point')
      .enter()
      .append('circle')
      .attr('label-visible', '');

    $compile(point[0])(scope);

【讨论】：