JSPlumb.draggable not working inside Angular directive

Question

I can't get JSPlumb to play nice with Angular. Inside my directive's link function, I want to enable dragging for the new element.

angular.module('myApp').directive('knEditorNode',function() { 
[...]
return {
  restrict: 'E',
  replace: true,
  scope: {
    nodeId: '@'
  },
  template: '<div id="{{nodeId}}" class="knNode">Loading ...</div>',

  link: function(scope, element) {
    var nodeModel = service.getNodeModel(scope.nodeId);
    angular.element(element).css('top', nodeModel.top);
    angular.element(element).css('left', nodeModel.left);
    angular.element(element).css('position', 'absolute');

    jsPlumb.draggable(angular.element(element));

    // THIS IS STRANGE (undefined):
    log.info ("dragging enabled: " + angular.element(element).attr('draggable')); 
  }
}
[...]

So, the "draggable" attribute is not set and dragging does not work. If I enable dragging directly using angular (and JQuery), it seems to work:

angular.element(element).attr('draggable', true)

However there are other strange effects (e.g. can't "drop" element somewhere), so I think this is not enough and I might need to use as much of the JSPlumb API as possible.

My HTML looks like this:

<div id="editorArea" class="knEditorArea panel panel-default">
  <div id="editorCanvas" class="knEditorCanvas">
    <div ng-repeat="(id, viewData) in nodeViews">
      <kn-editor-node node-id="{{id}}" />

relevant css is like:

.knEditorArea {
    height: 500px;
    position: relative;
}

.knEditorCanvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

.knNode {
    position: absolute;
    border: 1px solid;
    border-radius: 0.5em;
    color: black;
    height: 5em;
    width: 5em;
    z-index:20;
}

Answer 1

ok, I found the problem. Forgot to load JQuery UI library. After adding

  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

everything works as expected.

Answer 2

The element angular provides in the link function is a jquery element already so you shouldn't need to wrap it any further. I have an angular site using JSPlumb extensively and the element object alone works.

function link(scope, elem, attrs){
   jsPlumb.draggable(elem, {
      start: function () {},
      drag: function (event, ui) {},
      stop: function (event, ui) {}
    });
}

I have had to had to wrap the addEndpoint in a zero second timeout inside the link function for it to take.