Question

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

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

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

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

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

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>

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

另请参阅此 short demo 。

在AngularJs中使用jquery Ui.resizable（）

1 个答案: