Angular $compile 指令不更新 DOM 对象答案

【问题标题】：Angular $compile directive not updating DOM objectAngular $compile 指令不更新 DOM 对象
【发布时间】：2013-06-28 15:46:50
【问题描述】：

我正在尝试将 AngularJS 和 D3 集成到一个允许您绘制、拖动和调整形状大小的应用程序中。我正在尝试使用 Angular 绑定属性以避免手动更新 DOM，但它不起作用。

我有以下代码来创建一个矩形。基本上，我创建了一个带有转换属性的 SVG group 对象，该属性应该绑定到范围变量。然后我将rect 附加到该组：

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());
};

我创建了 SVG group 元素，用 Angular 编译它，然后将它附加到 DOM。我的拖动处理程序更新了 DOM 对象应该绑定到的 scope 中的 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;
    });

当我在控制台中记录我的范围对象时，我可以看到它正在更新。但是，我的 group 元素上的 transform 属性卡在 0、0 处。有人看到明显的错误吗？在 Angular 插值绑定似乎没有更新之前，有没有人遇到过这样的情况？

谢谢。

【问题讨论】：

您是否在拖动功能中遇到问题，最好分享 plunker 或 fiddle 演示

标签： javascript angularjs d3.js angularjs-directive

【解决方案1】：

我的开发团队帮助我找到了这个问题的答案。为了更新绑定，必须调用$scope.$apply 或$scope.$digest。这会通知 Angular 发生了一些变化，并且 Angular 将更新它所有的插值绑定。更改跟踪显然不会在 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.$apply(function () { // This wraps the changes.
            scope.objects[id].x = d3.event.x;
            scope.objects[id].y = d3.event.y;
        }
    });

translate 属性现在可以正确更新。

【讨论】：