Angular $ compile指令不更新DOM对象

Question

我试图将AngularJS和D3集成到一个应用程序中，该应用程序允许您绘制，拖动和调整形状。我试图用angular来绑定属性，以避免手动更新DOM，但它不起作用。

我有以下代码来创建一个矩形。基本上，我创建了一个SVG group对象，该对象具有应该绑定到范围变量的transform属性。然后我追加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元素，具有角编译它，然后将其附加到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插入绑定似乎没有更新之前，有没有人遇到过这样的情况？

谢谢。

Answer 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属性现在可以正确地更新。