Угловая директива компиляции, не обновляющая объект DOM

Question

Я пытаюсь интегрировать AngularJS и D3 в приложение, которое позволяет рисовать, перетаскивать и изменять размеры фигур. Я пытаюсь связать атрибуты с помощью углового, чтобы избежать необходимости вручную обновлять 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, скомпилировать его с Угловым, а затем добавить его в DOM. Мой обработчик перетаскивания обновляет объект Angular в scope, к которому должен привязываться объект DOM.

Моего обработчик перетаскивания следующим образом:

// 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 на моем элементе group застрял на 0, 0. Кто-нибудь видит что-то невероятно неправильное? Кто-нибудь сталкивается с ситуацией, подобной этой, прежде чем привязки привязки углового интерполяции, похоже, не обновляются?

спасибо.

Answer 1

Моя команда разработчиков помогла мне найти ответ на этот вопрос. Для того, чтобы привязки обновлялись, необходимо либо позвонить $scope.$apply, либо $scope.$digest. Это указывает на Угловое, что что-то изменилось, и 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 Атрибут теперь обновляется правильно.