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

无需在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

希望这对你有所帮助。

Answer 2

您的代码中似乎有两件事。

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

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

这是updated plunkr。