获取使用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 - 您可能会发现它很有用。