JSPlumb with Angular element directives

[she...@duosoftware.com]

Hi, I have used the following example for my angularjs-jsplumb application.

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

The problem I am facing is that when I change the "plumbItem" to be used as a angular element directive the jsplumb functionality doesnt function.

Currently in the example it uses as this.

<div plumb-item> </div>

What I want is to do the following.

<plumbItem></plumbItem>

Has already done this? if so I like to know how and appreciate your help.

[Ben Felda]

You need to use the dash in the element <plumb-item>

[Peter Hodges]

Personally, I wouldn't bother including the jQuery library at all.

The dom flavour of jsPlumb doesn't have a depedency on jQuery UI and, if you're new to Angular, having jQuery to fall back on will make it very tricky to grasp the Angular way of doing things.

Our approach is to add connection objects to an array on the $scope. Each connection object contains info on the connection, such as the source id, target id, type of connection (straight or flowchart) etc.

In the template, we use ng-repeat to render a list of <connection> elements which we pass in the connection data to. (<connection data="model.data"></connection>).

The connection directive uses this data to initialize jsPlumb and create the connection. It also handles events (click, dblclick etc).

There is really no reason to use jQuery.