9

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?

Georgi Angelov
  • 4,338
  • 12
  • 67
  • 96

3 Answers3

9

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

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

Mr MT
  • 658
  • 8
  • 15
  • isn't it with angular 1? Do you know of any other integration example with Angular 2? thanks – Loebre Apr 11 '18 at 10:42
5

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.

Alexander Puchkov
  • 5,913
  • 4
  • 34
  • 48
  • 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... – Georgi Angelov Jul 16 '13 at 13:23
  • 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. – Alexander Puchkov Jul 17 '13 at 14:28
-2

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

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

jordajm
  • 764
  • 5
  • 11
  • 4
    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 – Nick Mitchell Feb 28 '16 at 21:24