jquery - 将 jquery Ui.ressized() 与 AngularJs 一起使用

Question

我的模板之一中有一个 DOM 元素，我想使用 jqueryUi 调整其大小。总而言之，我有一个 <div>我的模板中名为“test”的元素......除此之外，我还尝试添加脚本来实际在多个位置调整大小，但我已经完全扭转了局面。

我一度认为指令可能是正确的做法......或者因为我使用jqueryui而不是真正的 Angular 类型的东西，所以我可以将脚本放入我的模板或 Controller 中...... .但到目前为止，由于多种原因，它们对我来说都失败了......

无论如何..回到第一个...

在 angularJs 应用程序中，如何实际实现 resizable() jqueryui 库的功能。

作为补充，我查看了下面的答案并编写了以下代码:

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

Controller :

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

<小时/>

如果您需要不同的可调整大小的配置，您可以使用属性将其传递到隔离范围。

<小时/>

另请参阅此 short demo 。