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?

Answer 1

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

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

Answer 2

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.