动态AngularJs由生成的SVG元素

Question

指令我有一个HTML标记与AngularJs指令，如：

<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建议，对于每一个生成的元素，它会工作，如：

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

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