Flame1845 Flame1845 - 1 year ago 119
AngularJS Question

jQuery Resizable with Angular ng-style doesn't work

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'}"/>


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/"


Any idea how I can get around this?

Answer Source

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