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

Question

所以我动态生成表格，roughtly这样

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

“数据”是在控制器的阵列，$ scope.data。基本的Angular，工作得很好。现在

，我也有到SVG元素（D3.js）添加到这些动态生成的一个< TD> </TD>取值

这些都以对应于也基于$可视化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圈元素应该有哪种颜色。这些信息位于$ scope.data - array中。但只是访问$范围是不够的。我需要绘制“当前”元素的信息。那可能吗？

---

如果这是不可能的，这里有一些可能的解决方法：

1）如果该指令有可能成为“自我意识”走一走，看一看在它被放在DOM，这可能帮帮我。注意我上面的代码我有<td id="a{{d.index}}>...

“a”就在那里，因为id开头的是一个字母。 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模板”的“编辑”（纳克-repeat/{{...}} - 东西）总是在最后。如果将新元素添加到数组中，则在angular创建新表格单元格之前，我的函数始终会启动。当我尝试它时，甚至$ scope。$ on（'includeContentLoaded'，alert（“...”））;在角度完成之前触发。

Answer 1

我不知道如何告诉指令，我的小svg-circle元素应该具有哪种颜色。此信息是在$ scope.data

通行证的颜色相同元素的属性您的指令将被使用（无论是）：

<some_element dir-circle the-color="d.color??"></some_element> 

在你的指令

然后：

return function ($scope, elm, attrs) { 
    // $scope.$eval(attrs.theColor) contains your color