動態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);