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

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

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

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>

directive:

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

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> 

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.

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.