使用jsPlumb拖动div时，其id尚未从AngularJS绑定中插入

Question

我的流程图使用jsPlumb使节点可拖动，然后允许节点之间的连接。然而，即使只是拖动，我也会被一个错误耽误。

每当我拖动一个节点时，控制台都会为移动的每个像素记录一条错误消息。错误是jsplump函数失败：TypeError:无法读取未定义的的属性'el'，我设法将其跟踪到jsplump.js第4919行。
在那里，局部变量elId（表示节点div的id）被正确设置为node-1。但是，在managedElements对象中，节点是用键node-{{{$ctrl.node.id}保存的。因此，当尝试访问managedElements[elId].el（在第4919行中）时，找不到（正确的）elId作为键，这会提示上述错误。

我无法确定何时设置了managedId。作为节点.component一部分的控制器具有以下代码（JsPlump服务仅返回一个jsPlumbInstance）：

const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
  const nodeDiv = $element.children('.node');
  JsPlumb.draggable(nodeDiv);
}];

我还尝试在模板完全链接时设置draggable方法（我是AngularJS的新手，不确定在调用控制器时是否进行了插值）：

const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
  const ctrl = this;

  ctrl.$postLink = function () {
    const nodeDiv = $element.children('.node');
    JsPlumb.draggable(nodeDiv);
  };
}];

每当触发鼠标移动事件时，所有这些代码段仍会在控制台中产生错误。

你知道我如何解决这个错误吗？我是否可以为管理删除提供正确的id？




Answer 1

问题是，$element没有插入id，因此具有无效id的元素被传递到jsPlumb并保存在managedElements中。

由于我不知道如何访问控制器中的插值元素，我手动重置控制器中元素的id，然后将元素传递给jsPlumb。