J0hj0h J0hj0h -4 years ago 100
AngularJS Question

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

My flowgraph uses jsPlumb to make the nodes draggable and later on allow for connections between nodes. However, even only with the dragging I am held up by an error.

Whenever I drag a node, the console logs an error message for each pixel moved. The error is

jsPlumb function failed : TypeError: Cannot read property 'el' of undefined
and I managed to track it down to be in
jsplumb.js
line 4919.

There, the local variable
elId
(which represents the
id
of the node's
div
) is set correctly to
node-1
. However, inside of the
managedElements
object the node is saved with the key
node-{{$ctrl.node.id}}
. Therefore, when attempting to access
managedElements[elId].el
(in line 4919), the (correct)
elId
is not found as a key, which prompts the error above.

I could not figure out when
managedId
is set. The controller that is part of the node
.component
has the following code (the
JsPlump
service simply returns a
jsPlumbInstance
):

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


I also tried setting the
draggable
method when the template is fully linked (I'm new to AngularJS and was not sure whether the interpolation has taken place when the controller is called):

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

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


All of these snippets still produce an error in the console whenever a mouse move event is fired.

Do you have an idea of how I can resolve this bug? Can I somehow provide the correct
id
for the
managedElements
?

Answer Source

The problem was that $element did not interpolate the id and therefore an element with an invalid id was passed through to jsPlumb and got saved in managedElements.

Since I do not know how to access the interpolated element inside the controller, I manually reset the id on the element in the controller and then passed the element on to jsPlumb.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download