Wenn Sie ein div mit jsPlumb ziehen, wird seine ID noch nicht von der AngularJS-Bindung interpoliert.

Question

Mein Flowgraph verwendet jsPlumb, um die Knoten ziehbar zu machen und später Verbindungen zwischen Knoten zu ermöglichen. Aber auch nur mit dem Ziehen werde ich von einem Fehler abgehalten.

Immer, wenn ich einen Knoten ziehe, protokolliert die Konsole eine Fehlermeldung für jedes verschobene Pixel. Der Fehler ist jsPlumb function failed : TypeError: Cannot read property 'el' of undefined und ich schaffte es auf die Spur 4919.
Es in jsplumb.js Linie zu sein, die lokale Variable elId (die die id des div des Knotens) richtig auf node-1 gesetzt. Innerhalb des Objekts managedElements wird der Knoten jedoch mit dem Schlüssel node-{{$ctrl.node.id}} gespeichert. Wenn Sie versuchen, auf managedElements[elId].el (in Zeile 4919) zuzugreifen, wird das (richtige) elId daher nicht als ein Schlüssel gefunden, der den obigen Fehler auffordert.

Ich konnte nicht herausfinden, wenn managedId eingestellt ist. Der Controller, ist (einfach kehrt der JsPlump Dienst ein jsPlumbInstance) Teil des Knotens .component hat den folgenden Code:

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

I auch versucht, die draggable Verfahren eingestellt wird, wenn die Vorlage vollständig verbunden ist (I bis AngularJS neu sind und war sich nicht sicher, ob die Interpolation stattgefunden hat, wenn der Controller genannt wird):

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

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

Alle diese Schnipsel noch einen Fehler in der Konsole erzeugen, wenn eine Mausbewegung Ereignis ausgelöst wird.

Haben Sie eine Idee, wie ich diesen Fehler beheben kann? Kann ich irgendwie die richtige id für die managedElements zur Verfügung stellen?

Answer 1

Das Problem war, dass $element nicht die id und damit ein Element mit einer ungültigen id wurde durch jsPlumb interpolieren hat bestanden und wurde in managedElements gespeichert.

Da ich nicht weiß, wie ich auf das interpolierte Element im Controller zugreifen kann, setze ich das id manuell auf das Element im Controller zurück und übergebe das Element dann an jsPlumb.