如何在JsPlumb小部件上启用resize？

我正在使用JSPlumb和AngularJS构建小部件列表，我需要使用每个小部件上的处理程序启用resize。 已经有一个example ，我已经实现了，但resize不会发生。 这是我的代码，

HTML：

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

我的实际小部件：

Answer 1

无需在angularjs之前移动jQuery。 只需将元素包装在$中，这样jQuery就能理解DOM并正确绑定可resize的事件。 如果您不依赖于范围而编译比链接快，则代替链接使用编译。

指令代码。

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

工作Plunkr

希望这对你有所帮助。

Answer 2

你的代码中有两件事似乎有问题。

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

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

这是更新的plunkr 。