How to enable resize on JsPlumb widget?

问题

Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an example already on it, i have implemented , but resize does not happen. here is my code,

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"
        });
    }
};

Here is the Plunker

Output after implementing pankajparkar's code,

My actual widget:

<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   >

回答1:

No need to move jQuery before angularjs. Just wrap the element inside $, so that jQuery will understand that DOM and bind resizable event properly. Instead of link use compile if you are not dependent on scope and Compile is comparatively faster than link.

Directive code.

 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

Hope this will helpful to you.

回答2:

Two things seem to be wrong in your code.

First, you use .resizeable() but the function name is .resizable().

Second, you use element.resizable() but element is a jqLite object. In your html you load AngularJS first, then jQuery; you should load jQuery first.

Here is the updated plunkr.

来源：https://stackoverflow.com/questions/27817367/how-to-enable-resize-on-jsplumb-widget

标签

javascript

jquery

angularjs

angularjs-directive

jsplumb