gpt4 book ai didi

javascript - Angular $compile 指令不更新 DOM 对象

转载 作者:行者123 更新时间:2023-11-30 13:01:09 25 4
gpt4 key购买 nike

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

我有以下代码来创建一个矩形。基本上,我创建了一个 SVG group 对象,它带有一个应该绑定(bind)到范围变量的 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 元素,用 Angular 编译它,然后将它附加到 DOM。我的拖动处理程序更新 scope 中 DOM 对象应绑定(bind)到的 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 插值绑定(bind)似乎没有更新?

谢谢。

最佳答案

我的开发团队帮助我找到了这个问题的答案。为了更新绑定(bind),必须调用 $scope.$apply$scope.$digest。这会通知 Angular 发生了某些变化,并且 Angular 将更新其所有插值绑定(bind)。更改跟踪显然不会在 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 属性现在可以正确更新。

关于javascript - Angular $compile 指令不更新 DOM 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17368655/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com