jquery - 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 函数，则会返回正确的值。但在脚本中(放置在相关 View Controller 中)它有所不同。

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

任何想法将不胜感激。

Answer 1

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

$(function () {

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

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

});