使用jqueryUi.resizeable（）与AngularJs [英] Using jqueryUi.resizeable() with AngularJs

问题描述

我在我的模板，我想让可调整大小的使用jQueryUI的一个DOM元素。长期和短期的是，我有一个＆LT; D​​IV＆GT; 元素在我的模板被称为测试......除此之外，我曾尝试添加脚本实际做调整在多个地方，但我已经得到了我自己完全转过身来。

I have a DOM element in one of my templates that I want to make resizable using jqueryUi. The long and short is that I have a <div> element in my template called "test".... Other than that I have tried adding scripts to actually do the resizing in multiple places but I have gotten myself completely turned around.

我想在一个点，一个指令可能是做正确的事...或者因为使用jQueryUI的，而不是真正的角型的东西，我可以把一个剧本到我的模板，或控制器脱身IM .. 。但他们都失败了，我有多种原因，到目前为止...

I thought at one point that a directive may be the proper thing to do ... or that since im using jqueryui and not really angular type stuff that I could get away with putting a script into my template, or controller ... but they have all failed for me for multiple reasons so far ...

反正..回到原点......

anyway .. back to square one ...

在一个的 angularJs应用的一个人如何真正落实可调整大小的（）从jQueryUI的库功能。

Within an angularJs application how does one actually implement the resizable() functionality from the jqueryui library .

作为补充我已经采取了看看下面的答案，整理了以下code：

As an addition I have taken a look at the answer below and worked up the following code:

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

这里的问题是，这是当模板被装载我的屏幕上得到什么渲染：

The issue here is that this is what gets rendered on my screen when the template is loaded:

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

这似乎是我应该看到......除了所有我在窗口中看到的是一个没有调整大小框中看到这个词的测试......当我检查了被添加到DOM元素个个都有宽度，但高度为0。

This seems like what i should see ... except that All i see in the window is the word test with no resize box visible ... and when I inspect the elements that get added to the DOM all of them have a width but 0 height.

推荐答案

对于这样的东西，一个指令总是以正确的方式去。结果
为了使一个元素可调整大小（带有可选的回调），你应该实现这样的指令：

For such stuff, a directive is always the right way to go.
To make an element resizable (with an optional callback), you should implement a directive like this:

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

Then, in the HTML:

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

---

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

---

If you need varying resizable configurations, you can pass that to the isolate scope using an attribute.

又见这个 短演示

See, also, this short demo.

这篇关于使用jqueryUi.resizeable（）与AngularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！