获取使用 ng-repeat 生成的 img 标签的高度

Question

我有一个使用 ng-repeat 创建图像的轮播。这些 img 标签的宽度已设置为 100%；和高度，自动。我如何以编程方式获取 img 标签的高度，因为在调整窗口大小时该值会发生变化？我试过了

$('#home-carousel img').load(function(){
    console.log($(this).height());
})

但它不起作用，因为当时不存在 imgs。 这是我正在使用的代码：

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Here's where the problem is -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img src="{{slide.imgUrl}}">
    </div>
  </div>

编辑：好的，让我详细说明一下。这就是我想要实现的目标： 所以油漆桶的图像应该与它在这张图像中的外观完全一致；就在背景图像结束的底部

问题是，由于图像的宽度是 100%，当调整窗口大小时，会发生这种情况。所以我想要做的是获取旋转木马中img图像的高度并根据它定位油漆桶

Answer 1

好的，所以我通过这样做解决了这个问题： 首先，我使用@Braden1996 的link 来获取首次加载时img 标签的初始高度

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img ng-src="{{slide.imgUrl}}" imageonload="imageLoaded()"><!--here-->
    </div>
  </div>
</div>

这里是javascript：

$scope.imageLoaded = function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
}

之后，每次调整窗口大小时都会更改油漆桶的位置。

$(window).resize(function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
})

注意：-100 是为了让水桶不会落在背景图片的正下方

Answer 2

看看Angular's ng-src。
此外，经过快速搜索，我发现了this - 您可能会觉得它很有用。