Using AngularJS and jsPlumb (use jsPlumb functions in AngularJS controller)

Question

So I have a project that I am working on and it requires that I use jsPlumb for graphical elements connections and I am building my app entirely using AngularJS.

What is the procedure to follow if I want to include another library's code into my controller (to fire up some jsPlumb code, say on ng-click) or any other part of my AngularJS code? Should I do that or why should I not do that?

Karlakarlan

Answer 1

I don't see an easy way to establish two way data binding between Angular and jsPlumb.

What I ended up doing on my project is creating a custom Angular service which serves as a bridge between controllers and jsPlumb. Such service contains methods specific to application, such as:

• removeElementFromFlow
• addElement
• getElements
• getConnections
• isElementConnected
• etc.

It allows to keep all jsPlumb plumbing code outside of controllers, keeping them clean.

Inebriate

Thanks @AlexPuckov! Btw, how do you handle the dynamic creation of the element? how do you know when the element is laoded? I get a lot of parentNode undefined and I am trying to stay away from $timeout... – Karlakarlan

Not sure I understand a problem you have with undefined parentNodes. But creation of element shouldn't be complicated: at some point in controller (click handler or something else) you call your custom function addElement in plumbService as I described above. That function adds new HTML element to jsPlumb container and configures endpoints. If it doesn't help I think it's better to create a new question on SO for this particular problem. – Inebriate

Answer 2

Take a look at this well-commented jsPlumb/angularJs integration example:

https://github.com/mrquincle/jsplumb-example

Zareba

isn't it with angular 1? Do you know of any other integration example with Angular 2? thanks – Herbst

Answer 3

JSPlumb has put out a tutorial on how to use JSPlumb with Angular:

https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html

Fjord

Yes but this is for the 'Toolkit' edition (at a starting cost of ~$2500 at the time of writing), as opposed to the free 'Community' edition – Parliamentarian