jQuery Resizable with Angular ng-style doesn't work

Question

I can't get jquery resizable to work with Angular and ng-style. I understand that I must specify a height and width when I create a resizable element, but as you can see from the below jsfiddle, any ng-style seems to get ignored, and there is no height or width applied.

<div ng-controller="myCtrl">
    <img resizable src="http://lorempixel.com/400/200/"
    ng-style="{'width':'400px', 'height':'200px'}"/>
</div>

http://jsfiddle.net/85my1qbc/3/

If, however, I replace ng-style with style, it works fine (as below)

<div ng-controller="myCtrl">
    <img resizable src="http://lorempixel.com/400/200/"
    style="width:400px;height:200px"/>
</div>

http://jsfiddle.net/go1qak0w/1/

Any idea how I can get around this?

Answer 1

Pass ngStyle to your directive, and set the css in the directive.

app.directive('resizable', function () {
    return {
        restrict: 'A',
        scope: {
            callback: '&onResize',
            ngStyle : '=ngStyle'
        },
        link: function postLink(scope, elem, attrs) {

            elem.css(scope.ngStyle);
            elem.resizable();
            elem.on('resizestop', function (evt, ui) {
                if (scope.callback) { scope.callback(); }
            });
        }
    };
});

Reason : When the directive resizable compiles, the width and height of element is zero. You can check this by calling elem.css('width') in the resizable directive.

Check the updated fiddle here