Javascript 从ajax请求接收数据后，获取元素的高度，单位为ng repeat

我调用一个ajax请求来获取产品列表，然后使用angular的ng repeat来渲染它

我想获取列表中包含一个产品的

div

元素的高度，但控制台总是将“0”记录到屏幕上，我尝试在请求完成后使用

$timeout

this.$timeout(function () {
    let image_id = '#image_id';
    let height = $(image_id).height();
    console.log(height);
 },0);

---

我在列表中有三个项目，使用ng repeat在浏览器上渲染它。我想使两个视频的高度等于第一个图像的高度。

---

如果列表是在controller中定义的，那么它工作得很好。但是，如果我调用ajax请求并将数据放入列表，则上面的函数始终会将0记录到屏幕上。

您可以使用自定义指令从第一个元素获取高度，并将所有元素的高度更改为相同的高度：

<div ng-controller="Ctrl">
  <div class="thing" ng-repeat="thing in things" same-height>
    thing {{thing}}
  </div>
</div>

    function Ctrl($scope) {
  $scope.things = [
    'A', 'B', 'C'
  ];
  $scope.height ="auto";
}

angular.module('myApp', [])
  .directive('sameHeight', function() {
    return function(scope, element, attrs) {
      if (scope.$first) {

        scope.$parent.height = element[0].offsetHeight;


      }
      var height = scope.height;
      element.css('height',height+'px');
    };
  });

东西{{东西}
函数Ctrl（$scope）{
$scope.things=[
“A”、“B”、“C”
];
$scope.height=“自动”；
}
angular.module（'myApp'，[]）
.directive（'sameHeight'，function（）{
返回函数（范围、元素、属性）{
如果（范围$first）{
scope.$parent.height=元素[0]。远视；
}
变量高度=范围高度；
css（'height'，height+'px'）；
};
});

---

演示：

您可以使用自定义指令获取第一个元素的高度，并将所有元素的高度更改为相同的高度：

<div ng-controller="Ctrl">
  <div class="thing" ng-repeat="thing in things" same-height>
    thing {{thing}}
  </div>
</div>

    function Ctrl($scope) {
  $scope.things = [
    'A', 'B', 'C'
  ];
  $scope.height ="auto";
}

angular.module('myApp', [])
  .directive('sameHeight', function() {
    return function(scope, element, attrs) {
      if (scope.$first) {

        scope.$parent.height = element[0].offsetHeight;


      }
      var height = scope.height;
      element.css('height',height+'px');
    };
  });

东西{{东西}
函数Ctrl（$scope）{
$scope.things=[
“A”、“B”、“C”
];
$scope.height=“自动”；
}
angular.module（'myApp'，[]）
.directive（'sameHeight'，function（）{
返回函数（范围、元素、属性）{
如果（范围$first）{
scope.$parent.height=元素[0]。远视；
}
变量高度=范围高度；
css（'height'，height+'px'）；
};
});

---

演示：

如果您需要在产品加载到视图之前预构建div（以避免将div表单0呈现为自动） 你可以用

 ng-style="height:divHeight"

在cotroller中，您可以使用一项服务，在ajax完成之前，通过使用基于移动分辨率的给定标准定量，为div提供一个高度

在职

 getImageHeight() {
        var x = window.innerWidth * 62.8 / 100;
        var roundHeight = Math.ceil(x);
        return Promise.resolve(roundHeight);
    }

---

如果您需要在产品加载到视图之前预构建div（以避免将div表单0呈现为自动） 你可以用

 ng-style="height:divHeight"

在cotroller中，您可以使用一项服务，在ajax完成之前，通过使用基于移动分辨率的给定标准定量，为div提供一个高度

在职

 getImageHeight() {
        var x = window.innerWidth * 62.8 / 100;
        var roundHeight = Math.ceil(x);
        return Promise.resolve(roundHeight);
    }

---

试试这个，也许对你有帮助。此代码将在图像的

onload

中执行，因此如果图像存在，它将不会显示高度

0

this.$timeout(function () {
  let image_id = '#image_id';
  var tmpImg = new Image() ;
  tmpImg.src = $(image_id ).attr('src') ;
  tmpImg.onload = function() {
   let height = $(image_id).height();
   console.log(height);
  };

},0);

---

试试这个，也许对你有帮助。此代码将在图像的

onload

中执行，因此如果图像存在，它将不会显示高度

0

this.$timeout(function () {
  let image_id = '#image_id';
  var tmpImg = new Image() ;
  tmpImg.src = $(image_id ).attr('src') ;
  tmpImg.onload = function() {
   let height = $(image_id).height();
   console.log(height);
  };

},0);

---

你可以用$PROMITE。这将在获取数据后调用您的函数。是的，我在该请求中使用$PROMITE，但当调用函数以获取产品图像的高度时，它总是返回0。还有一件事，当您设置id“image\u id”时，ng repeat中的所有图像是否都不相同？您可以使用$PROMITE。这将在获取数据后调用您的函数。是的，我在该请求中使用$PROMITE，但当调用函数以获取产品图像的高度时，它始终返回0。还有一件事，当您设置id“image\u id”时，ng repeat中的所有图像是否都相同？我在列表中有三个项目，并使用ng repeat在浏览器上渲染它。第一个图像有高度自动，我想得到第一个图像的高度，并将此高度应用于旁边的两个视频。请看图片：[链接]（）不确定为什么会得到-1。指令可能是一种方法，因为这样您就知道渲染元素的过程已经完成。在分配scope变量之后检查高度可能会出错，因为它很可能在呈现ng repeat之前执行。@becquerel可能是错误元素的offsetHeight。最后一项，这个答案并没有显示如何计算列表中的最高高度。我在列表中有三个项目，使用ng repeat在浏览器上呈现。第一个图像有高度自动，我想得到第一个图像的高度，并将此高度应用于旁边的两个视频。请看图片：[链接]（）不确定为什么会得到-1。指令可能是一种方法，因为这样您就知道渲染元素的过程已经完成。在分配scope变量之后检查高度可能会出错，因为它很可能在呈现ng repeat之前执行。@becquerel可能是错误元素的offsetHeight。最后一项，这个答案没有显示如何计算列表中的最高高度。谢谢@Manoj Lodhi，我找到了另一种方法来解决这个问题，只是把它放在一个表中，不好，但我需要最快地修复它。谢谢@Manoj Lodhi，我找到了另一种方法来解决这个问题，只是把它放在一个表中，不好，但我需要最快地修复它。