Flame1845 Flame1845 - 1 year ago 158
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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download