0

だから私は動的に、大まかにこのようにテーブルを構築しています

<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は非常にうまく機能します。

ここで、動的に生成された<td> </ td>の1つに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}}>...

IDは文字で始まるため、「a」はそこにあります。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（ "..."））; 角度が完了する前に発砲します。

4

1 に答える 1

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
于 2013-02-01T05:01:18.080 に答える