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

Question

所以我正在动态构建一个表，大致是这样的

<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。基本的 Angular，效果很好。

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

s

这些必须对应同样基于 $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}}>...

“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-template”（ng-repeat/{{...}} - 东西）的“编译”总是在最后。如果将新元素添加到数组中，我的函数将始终在 angular 创建新的表格单元格之前触发。当我尝试它时，甚至 $scope.$on('includeContentLoaded', alert("..."));在 angular 完成之前触发。

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