如何在JsPlumb小部件上启用调整大小? [英] How to enable resize on JsPlumb widget?

问题描述

在用JSPlumb和AngularJS构建小部件列表时，我需要使用每个小部件上的处理程序来启用调整大小.有一个 example 已经执行了，但是调整大小不会发生. 这是我的代码，

Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an example already on it, i have implemented , but resize does not happen. here is my code,

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的代码后的输出，

Output after implementing pankajparkar's code,

我的实际小部件:

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

推荐答案

无需在angularjs之前移动jQuery. 只需将元素包装在$内，以便jQuery就能理解DOM并正确绑定可调整大小的事件.如果您不依赖于范围和 编译比链接要快.

No need to move jQuery before angularjs. Just wrap the element inside $, so that jQuery will understand that DOM and bind resizable event properly. Instead of link use compile if you are not dependent on scope and Compile is comparatively faster than link.

指令代码.

 routerApp.directive('resizeable', function() {
  return {
    restrict: 'A',
    compile: function(element, attrs) {    
      $(element).resizable({
        resize: function(event, ui) {
          jsPlumb.repaint(ui.helper);
        },
        handles: "all"
      });
    }
  };
});

工作中的朋克

希望这对您有所帮助.

这篇关于如何在JsPlumb小部件上启用调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！