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

Question

我的流程图使用 jsPlumb 使节点可拖动，稍后允许节点之间的连接。但是，即使只是拖动我也被错误阻止了。

每当我拖动一个节点时，控制台都会为每个移动的像素记录一条错误消息。错误是 jsPlumb function failed : TypeError: Cannot read property 'el' of undefined，我设法将其追踪到 jsplumb.js 第 4919 行。
在那里，局部变量elId（表示节点div的id）被正确设置为node-1。但是，在 managedElements 对象内部，节点使用键 node-{{$ctrl.node.id}} 保存。因此，在尝试访问managedElements[elId].el时（第4919行），没有找到（正确的）elId作为key，从而提示上面的错误

我不知道什么时候设置 managedId。作为节点 .component 的一部分的控制器具有以下代码（JsPlump 服务只是 returns a 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);
  };
}];

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

你知道我该如何解决这个错误吗？我能以某种方式为 managedElements 提供正确的 id 吗？

Answer 1

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

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

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

When dragging a div using jsPlumb its id is not yet interpolated from AngularJS binding

angularjs

jsplumb