Search code examples
angularjsjsplumbangularjs-controllerangularjs-ng-click

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

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?

Solution

  • 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.