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

So, I have a project that I am working on, and for it I use jsPlumb to connect graphic elements, and I completely create an application using AngularJS.

What is the procedure that should be followed if I want to include other library code in my controller (to run jsPlumb code, say, by ng-click) or any other part of my AngularJS code? Should I do this or why shouldn't I?

+8
angularjs angularjs-controller angularjs-ng-click jsplumb
source share
3 answers

I see no easy way to establish two-way data binding between Angular and jsPlumb.

As a result of my project, I created a custom Angular service that serves as a bridge between controllers and jsPlumb. Such a service contains application-specific methods, such as:

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

This allows you to store all jsPlumb system code outside the controllers, keeping them clean.

+4
source share

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

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

+9
source share

JSPlumb has released a tutorial on using JSPlumb with Angular:

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

-one
source share

All Articles