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指令

1 个答案: