Using jqueryUi.resizeable() with AngularJs

Question

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

element in my template cal

相关标签:

Answer 1

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

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.