在AngularJs中使用jqueryUi.resizeable（）
我在我的一个模板中有一个DOM元素，我想使用jqueryUiresize。 长和短是我的模板中有一个名为“test”的
元素….除此之外，我尝试添加脚本实际上在多个地方进行大小调整，但我已经完全扭转了局面。
我曾经想过一个指令可能是正确的事情……或者因为我使用jqueryui而不是真正的角度类型的东西，我可以通过将脚本放入我的模板或控制器……但他们到目前为止，由于多种原因，我都失败了…
无论如何..回到原点……
在angularJs应用程序中，如何实际实现jqueryui库中的resizable()function。
作为补充，我已经看了下面的答案，并编写了以下代码：
HTML：
Test
指示：
angular.module('tffullscreen.directives'). directive('resizable', function() { return { restrict: 'A', scope: { callback: '&onResize' }, link: function postLink(scope, elem, attrs) { elem.resizable(); elem.on('resizestop', function (evt, ui) { if (scope.callback) { scope.callback(); } }); window.e = elem; } }; });
控制器：
$scope.resize = function () { console.log("RESIZED FUNCTION CALLED IN CONTROLLER"); };
这里的问题是，这是在加载模板时在我的屏幕上呈现的内容：
Test
这看起来像我应该看到的…除了我在窗口中看到的所有单词test没有resize框可见…当我检查添加到DOM的元素时，所有这些元素都有宽度但是0高度。
对于这样的东西，指令总是正确的方法。
要使元素可resize（使用可选的回调），您应该实现如下指令：
app.directive('resizable', function () { var resizableConfig = {...}; return { restrict: 'A', scope: { callback: '&onResize' }, link: function postLink(scope, elem) { elem.resizable(resizableConfig); elem.on('resizestop', function () { if (scope.callback) scope.callback(); }); } }; });
然后，在HTML中：
Hello, world !
如果需要不同的可resize的配置，可以使用属性将其传递给隔离范围。
另见这个简短的演示 。