Как включить изменение размера в виджет JsPlumb?

Question

Создайте список виджетов с JSPlumb и AngularJS, мне нужно включить изменение размера с помощью обработчика на каждом виджете. На нем уже есть example, я реализовал, но изменить размер не происходит. вот мой код,

HTML:

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" resizeable> 

App.js:

routerApp.directive('resizeable',function($compile){ 
return{ 
    restrict: 'A', 
    link: function(scope, element, attrs){ 
     element.resizeable({ 
     resize : function(event, ui) {    
       jsPlumb.repaint(ui.helper); 
      }, 
      handles: "all" 
     }); 
    } 
}; 

Здесь вы Plunker

выход после внедрения кода pankajparkar в,

Мой фактический виджет:

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style="margin: 20px; top: 50px; left: 110px; height: 480px; width: 400px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}" resizeable > 

Answer 1

Не нужно перемещать jQuery перед angularjs. Просто оберните элемент внутри $, так что jQuery поймет, что DOM и связать изменяемое событие должным образом. Вместо использования ссылок используйте компиляцию, если вы не зависимы от области действия и Компиляция сравнительно быстрее, чем ссылка.

Директива код.

routerApp.directive('resizeable', function() { 
    return { 
    restrict: 'A', 
    compile: function(element, attrs) {  
     $(element).resizable({ 
     resize: function(event, ui) { 
      jsPlumb.repaint(ui.helper); 
     }, 
     handles: "all" 
     }); 
    } 
    }; 
}); 

Working Plunkr

Надеется, что это будет полезно для вас.

Answer 2

Две вещи, кажется, неправильно в вашем коде.

Во-первых, вы используете .resizeable(), но имя функции .resizable().

Во-вторых, вы используете element.resizable(), но element - это объект jqLite. В вашем html вы сначала загружаете AngularJS, затем jQuery; вы должны сначала загрузить jQuery.

Адрес updated plunkr.