Question

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

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

“data”是Controller中的数组$ scope.data。 Basic Angular，效果非常好。

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

这些必须与同样基于$ 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”就在那里因为ids以字母开头。 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（“...”））;在角度完成之前发射。

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

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

1 个答案: