如何在 JsPlumb 小部件上启用调整大小？答案

【问题标题】：How to enable resize on JsPlumb widget?如何在 JsPlumb 小部件上启用调整大小？
【发布时间】：2015-01-07 10:30:29
【问题描述】：

我正在使用 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   >

【问题讨论】：

@NaeemShaikh 我用 plunker 修改了问题

标签： javascript jquery angularjs angularjs-directive jsplumb

【解决方案1】：

不需要在 angularjs 之前移动 jQuery。只需将元素包装在 $ 中，这样 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

希望这对你有帮助。

【讨论】：

这就是我想要的。现在我可以用我的小部件找到调整大小的处理程序，但它没有调整大小。有什么想法吗？
@Sajeetharan 什么没有调整大小？
你检查过plunkr。 div 正在正确调整大小。
是的，它在 plunkr 中运行良好，在我的实际应用程序中，当我使用处理程序调整大小时没有任何反应。有什么想法吗？
ok.that 表示 div 正在调整大小，但 JsPlumb 图表没有调整大小。你能创造一个同样问题的小提琴吗？这样我就可以弄清楚那里发生了什么。

【解决方案2】：

您的代码中有两处似乎有问题。

首先，您使用.resizeable()，但函数名称为.resizable()。

其次，您使用element.resizable()，但element 是jqLite 对象。在您的 html 中，您首先加载 AngularJS，然后加载 jQuery；你应该先加载 jQuery。

这里是updated plunkr。

【讨论】：

很酷，但我遇到的问题是我需要先加载 angularJS。有什么解决办法吗？