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,


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


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,

<img src="https://i.stack.imgur.com/D7qxT.png" alt="enter image description here">

<strong>My actual widget:</strong>

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


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.

<strong>Directive code.</strong>

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.


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.


  • Angularjs - javascript not loading inside partial views
  • How do I make an custom drawn resizable container?
  • Android layout folder on different devices
  • I can't split action bar in android
  • How to make an app tablet compatible?
  • How to prevent sibling state controller from refreshing?
  • What is the dash (“-”) when used with pipe (“|”) in CMD?
  • Handle Authentication and Authorization in jax-rs webservice with cxf
  • How to add a “using” statement to the System.Data.Entity namespace [closed]
  • Compiling Element Causes Input Caret Position to Move to End
  • R h2o.glm - issue with max_active_predictors
  • Angular2 - Template reference inside NgSwitch
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Set focus to first invalid form element in AngularJS
  • NUnit 3.0 TestCase const custom object arguments
  • Groovy: Unexpected token “:”
  • JSON response opens as a file, but I can't access it with JavaScript
  • dc-js disable selecting slices on click for pie chart
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Read text file and split every line in MSBuild
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • Symfony2: How to get request parameter
  • Importing jscolor library in angular 2
  • Akka Routing: Reply's send to router ends up as dead letters
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Is there a mandatory requirement to switch app.yaml?
  • Qt: Run a script BEFORE make
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?