如何在JsPlumb小部件上啓用調整大小？

上午用JSPlumb和AngularJS構建了一個小部件列表，我需要在每個小部件上使用處理程序來啓用調整大小。已經有一個example，我已經實施，但不會調整大小。這裏是我的代碼，如何在JsPlumb小部件上啓用調整大小？

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" 
     }); 
    } 
};

這裏是實現pankajparkar的代碼後Plunker

輸出，

enter image description here

我的實際部件：

<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 >

來源

2015-01-07 Sajeetharan

創建一個plunkr。 –

@NaeemShaikh我修改了這個問題，用蹦極 – Sajeetharan

不需要在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

希望這對您有所幫助。

來源

2015-01-10 20:23:27

這就是我的遺憾，現在我可以找到調整大小處理程序與我的小部件，但它不會調整大小。任何想法？ – Sajeetharan

@Sajeetharan什麼是不調整大小？ –

你檢查過普朗克嗎？ div正確調整大小。 –

兩件事情似乎是錯誤的代碼。

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

其次，您使用element.resizable()，但element是jqLite對象。在你的html中，你先加載AngularJS，然後加載jQuery;你應該首先加載jQuery。

這裏是updated plunkr。

來源

2015-01-10 11:58:37 richadr

很酷，但我遇到的問題是我需要首先加載angularJS。有沒有解決方法？ – Sajeetharan

如何在JsPlumb小部件上啓用調整大小？

回答

相關問題