如何在 JsPlumb 小部件上启用调整大小? [英] How to enable resize on JsPlumb widget?

问题描述

我正在使用 JSPlumb 和 AngularJS 构建一个小部件列表，我需要使用每个小部件上的处理程序启用调整大小.有一个

希望对您有所帮助.

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   >

解决方案

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.

这篇关于如何在 JsPlumb 小部件上启用调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！