Using jqueryUi.resizeable() with AngularJs

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply