jQuery Angular ng-styleでサイズ変更ができません

Question

Angularとng-styleで動作するようにjqueryサイズを変更することはできません。私は、サイズ変更可能な要素を作成するときに高さと幅を指定する必要があることを理解していますが、下のjsfiddleからわかるように、ngスタイルは無視され、高さや幅は適用されません。

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

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

、しかし、私はスタイルでNGスタイルを交換した場合、それは（以下のように）正常に動作

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

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

私は周りに取得することができますどのように任意のアイデアこの？

Answer 1

ディレクティブにngStyleを渡し、ディレクティブにcssを設定します。

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(); } 
      }); 
     } 
    }; 
}); 

理由：ディレクティブのサイズ変更がコンパイルされると、要素の幅と高さはゼロになります。これは、resizableディレクティブでelem.css（ 'width'）を呼び出すことで確認できます。

Check the updated fiddle here

Answer 2

通常ngのスタイルの値がスコープ変数$scope.myStyle = {'width':'400px', 'height':'200px'}になり、あなたが

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

ngStyle

で変数を使用することができます参考： ngStyle