Angular/Ionic - 获得正确的元素尺寸

Question

我有一个如下所示的 Ionic 模板：

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

为了使ion-scroll 正常工作，它的宽度/高度需要小于其内容（在本例中为包含的图像）。 (Ionic scrolling horizontally and vertically)

所以我想将ion-scroll 的大小调整为与ion-content 容器的大小相同。通过指定这个大小，滚动就可以正常工作了。

为ion-scroll 的宽度和高度指定100% 不适用于滚动；该值需要以像素为单位显式设置。

所以我需要获取 'ion-content' 的正确宽度和高度。

我尝试过使用 jQuery：

 $('.main_content').height()

如果我在控制台中运行这个 jQuery 函数，就会返回正确的值。但是在脚本中（放置在相关的视图控制器中）它有所不同。

我猜这与编译/指令过程在 Angular/Ionic 中的工作方式有关。但是作为这个框架的新手，我不知道该怎么做。

任何想法将不胜感激。

Answer 1

我假设您无法像您发布的链接中的第二条评论那样设置宽度和高度。这行得通吗？

$(function () {

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

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

});