javascript - 如何在 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 并正确绑定(bind)可调整大小的事件。如果您不依赖于范围和 编译比链接快。

指令代码。

 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

希望对您有所帮助。