javascript - Angular $compile ディレクティブが DOM オブジェクトを更新しない

Question

図形の描画、ドラッグ、サイズ変更を可能にするアプリケーションに AngularJS と D3 を統合しようとしています。DOM を手動で更新する必要がないように、angular を使用して属性をバインドしようとしていますが、機能していません。

長方形を作成する次のコードがあります。group基本的に、スコープ変数にバインドする変換属性を持つSVG オブジェクトを作成します。rect次に、そのグループにa を追加します。

var drawSquare = function () {
    console.log("DrawSquare");
    var id = uuid.v4();
    scope.objects[id] = { x: 0, y: 0, w: 40, h: 40 };
    var parent = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "g"))
        .attr("id", id)
        .attr("transform", "translate({{objects['" + id + "'].x}}, {{objects['" + id + "'].y}})");

    var element = parent.data([scope.objects[id]])
        .append("rect")
        .call(drag)
        .call(click);

    setSquareAttrs(element, id);
    //.attr(defaultSquare);
    console.log("parent", parent.node());
    $compile(parent.node())(scope);
    console.log("parent", parent.node());

    container.node().appendChild(parent.node());
};

SVGgroup要素を作成し、Angular でコンパイルしてから、DOM に追加します。scope私のドラッグ ハンドラーは、DOM オブジェクトがバインドされるAngular オブジェクトを更新します。

私のドラッグハンドラーは次のとおりです。

// Main drag function.
var drag = d3.behavior.drag()
    .on("drag", function (d) {
        console.log("dragmove!", d3.event.x, d3.event.y);
        var id = d3.select(this.parentNode).attr("id");
        console.log("id", id);
        console.log("scopeobjects", scope.objects[id]);
        scope.objects[id].x = d3.event.x;
        scope.objects[id].y = d3.event.y;
    });

スコープ オブジェクトをコンソールに記録すると、更新されていることがわかります。しかし、私の要素のtransform属性は 0, 0 のままです。groupAngular 補間バインディングが更新されないように見える前に、このような状況に遭遇した人はいますか?

ありがとうございました。