Angular.js:在动态网站中使用指令

所以我正在动态构建一个表格，就像这样

<tbody ng-repeat="d in data">
<td>{{d.name}}</td>
<td>{{d.dircleColor}}</td>   
<td id="a{{d.index}}>{{d.someOtherData}}</td>
...

"data"是一个数组，在控制器中$scope.data。基本角度，效果很好。

现在，我还必须将一个 svg 元素 （D3.js） 添加到其中一个动态生成的

这些必须对应于同样基于 $scope.data 的可视化，以便图表中的红色圆圈对应于表中的红色圆圈，并且用户知道在哪里查找信息。

我最大的希望是指令

.directive('dirCircle', function () {
   return function ($scope, elm, attrs) {                        
     var vis = d3.select(elm[0]).append("svg").attr("width", w).
        attr("height", h).attr("class", "circlesClass");
     node.append("svg:text")    [... more styling...]

这有效，但目前我不知道如何告诉指令，我的小 svg-circle 元素应该有哪种颜色。此信息位于 $scope.data - 数组中。但仅仅访问$scope是不够的。我需要绘制"当前"元素的信息。这可能吗？

如果无法做到这一点，以下是一些可能的解决方法：

1）如果指令可以变得"自我意识"并环顾放置它的DOM，那可能会有所帮助。请注意，在我上面的代码中，我<td id="a{{d.index}}>...

d.index 标识我的数组中的相关数据，那么如果我可以从我的指令访问 $scope.data...？

2）像往常一样生成D3，但将其放入动态生成的表格单元格中，如下所示：

for (var i = 0; i < _data.length; i++) {
var svgContainer = d3.select("#a" + _data[i].index).append("svg")  //circleData[0].ci
            .attr("width", 20)
            .attr("height", 20)
            .attr("class", "circlesOnTheRight");

然而，来自"html-template"（ng-repeat/{{...}} - stuff）的"编译"总是在最后。如果将新元素添加到数组中，我的函数将始终在 angular 创建新表单元格之前触发。当我尝试它时，甚至$scope.$on（'includeContentLoaded'， alert（"..."））;在角度完成之前开火。