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

Question

我有一个带有 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？

Answer 1

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

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

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

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

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

Dynamic AngularJs directive by generated SVG element

svg

d3.js

angularjs