使用Angular ng風格的jQuery可調整大小不起作用

我無法讓jquery調整大小以使用Angular和ng風格。我知道當我創建一個可調整大小的元素時，我必須指定高度和寬度，但正如您從下面的jsfiddle中看到的，任何ng樣式似乎都會被忽略，並且沒有應用高度或寬度。使用Angular ng風格的jQuery可調整大小不起作用

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

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

但是，如果我取代吳式風格，它工作正常（如下）

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

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

任何想法，我怎樣才能解決這個？

來源

2016-08-18 Flame1845

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

原因：當指令可調整大小編譯時，元素的寬度和高度爲零。你可以通過在可調整大小的指令中調用elem.css（'width'）來檢查它。

Check the updated fiddle here

來源

2016-08-18 11:04:17 Netdeamon

這是偉大的，謝謝。它適用於ng-style =「{'width'：'280px'，'height'：'180px'}」，但如果我做類似ng-style =「getLayerStyle（sceneLayer）」的話，我會遇到問題「 – Flame1845

只要因爲它的函數返回json對象，我不認爲我們確實有任何問題。我嘗試用ngstyle函數重新創建問題，但對我來說工作得很好。這是[鏈接到jsfiddle]（http://jsfiddle.net/Netdeamon/85my1qbc/11/） – Netdeamon

通常NG-樣式值將範圍變量$scope.myStyle = {'width':'400px', 'height':'200px'}，您可以在ngStyle

使用可變

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

編號：ngStyle

來源

2016-08-18 11:31:13 Shafeeque

這是一個錯字...如果你檢查小提琴你會看到我用正確的語法與引號。在我的實際代碼中，我使用範圍變量，但爲了簡單起見，我將它內聯。我不認爲這應該有所作爲。有任何想法嗎？ – Flame1845

@ Flame1845編輯我的答案 – Shafeeque

它應該沒有區別，如果我使用範圍變量或如果我寫內聯樣式，對不對？ – Flame1845

使用Angular ng風格的jQuery可調整大小不起作用

回答

相關問題