2014-07-09 72 views
2

我具有離子模板,看起來像這樣:角/離子 - 獲取正確的元素尺寸

<ion-view title="{{doc.title}}"> 
    <ion-content has-header="true" padding="false" direction="xy" class="main_content"> 
     <ion-scroll has-header="true" padding="false" direction="xy" zooming="true" min-zoom="1" max-zoom="3"> 
     <img ng-src='{{frameSrc}}' class='displaycontent'> 
     </ion-scroll> 
    </ion-content> 
</ion-view> 

爲了「離子滾動」正常發揮作用,它需要具有更小的寬度/高度比其內容(在這種情況下,包含的圖像)。 (Ionic scrolling horizontally and vertically

所以我想調整'ion-scroll'的大小與'ion-content'容器的大小相同。通過指定這個大小,然後滾動功能就像它應該。

指定「100%」爲「離子滾動」的寬度和高度不適用於滾動;該值需要顯式設置像素。

所以我需要獲取'ion-content'的正確寬度和高度。

我已經使用jQuery嘗試:

$('.main_content').height() 

如果我運行在控制檯這個jQuery函數,返回正確的價值......但在腳本(放置相關視圖控制器內),它是不同的。

我猜這是關於如何編譯/指令過程在Angular/Ionic中的工作。但是對於這個框架而言,我不知道該怎麼做。

任何想法,將不勝感激。

回答

0

我假設你無法像發佈的鏈接中的第二條評論那樣設置內聯的寬度和高度。這會工作嗎?

$(function() { 

    var imgW = $(".displaycontent").width(); 
    var imgH = $(".displaycontent").height(); 

    $(".main_content").css({ 
     "width": imgW/2 + "px", 
     "height": imgH/2 + "px"; 
    }); 

}); 
+0

不,$('。main_content')。height()仍然返回0. – user2562424

+0

這是超級怪誕的。你有沒有嘗試寫香草JavaScript來獲得大小? –