Using jqueryUi.resizeable () with AngularJs

Question

I have a DOM element in one of my templates that I want to change using jqueryUi. The long and short one is that I have an element <div>in my template called "test" ... Also, I tried to add scripts to actually resize in several places, but I turned around completely.

At some point, I thought that the directive might be the right thing ... or that since I used jqueryui and not really an angular type of material that I could get away with putting the script in my template, or controller .. but they have not succeeded for me for several reasons so far ...

anyway .. back to the square ...

In an angularJs application, how to actually implement the functionality resizable()from the jqueryui library.

As a complement, I reviewed the answer below and processed 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 problem is that this is what appears on my screen when loading the template:

<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 is similar to what I should see ... except that all I see in the window is a word test without a visible resize window ... and when I check the elements that are added to the DOM, they all have width but 0 height.

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>

---

, .

---

. .