如何在 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

您的代码中似乎有两处错误。

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

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

这里是 updated plunkr.

Answer 2

无需将 jQuery 移动到 angularjs 之前。只需将元素包裹在 $ 中，这样 jQuery 就会理解 DOM 并正确绑定可调整大小的事件。如果您不依赖范围和编译速度比 link.

相对快

指令代码。

 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

希望对您有所帮助。

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

How to enable resize on JsPlumb widget?

javascript

jquery

jsplumb

angularjs

angularjs-directive