在AngularJs中使用jqueryUi.resizeable()

Question

我在我的一个模板中有一个DOM元素,我想使用jqueryUi调整大小.长和短是<div>我的模板中有一个名为"test" 的元素....除此之外,我尝试添加脚本实际上在多个地方进行大小调整,但我已经让自己完全转过身来.

我曾经想过,一个指令可能是正确的事情......或者因为我使用jqueryui而不是真正的角度类型的东西,我可以通过将脚本放入我的模板或控制器......但他们到目前为止,由于多种原因,我都失败了...

无论如何..回到原点......

在angularJs应用程序中,如何实际实现jqueryuiresizable()库中的功能.

作为补充,我已经看了下面的答案,并编写了以下代码:

HTML:

<div resizable on-resize="resize()"> Test </div>

指示:

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

这里的问题是,这是在加载模板时在我的屏幕上呈现的内容:

<div resizable="" on-resize="resize()" class="ng-isolate-scope ui-resizable"> 
Test 
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div> 

这看起来像我应该看到的...除了我在窗口中看到的所有单词test没有调整大小框可见...当我检查添加到DOM的元素时,它们都有宽度但是0高度.

Answer 1

对于这样的东西,指令始终是正确的方法.
要使元素可调整大小(使用可选的回调),您应该实现如下指令:

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

<div resizable on-resize="someFunction()">Hello, world !</div>

如果需要不同的可调整大小的配置,可以使用属性将其传递给隔离范围.

另见这个简短的演示.