Question

我有一个离子模板，如下所示：

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

为了离子滚动＆＃39;为了正常运行，它需要比其内容（在这种情况下，包含的图像）具有更小的宽度/高度。（Ionic scrolling horizontally and vertically）

所以我想调整一下“离子滚动”。与“离子含量”相同的尺寸＆＃39;容器。通过指定此大小，滚动然后按预期运行。

指定＆＃34; 100％＆＃34;对于“离子滚动”的宽度和高度不适合滚动;该值需要以像素显式设置。

所以我需要获取“离子内容”的正确宽度和高度。

我尝试过使用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";
    });

});

角度/离子 - 获得正确的元素尺寸

1 个答案: