无法从AngularJS中的元素计算offsetHeight

Question

我有以下指令：

app.directive('myObject', function(){
  return {
    restrict: 'A',
    link: function(scope, elem){
      console.log(elem[0].offsetHeight);
    }
  };
});

这基本上是记录其目标元素的offsetHeight ，但它不起作用。 我猜它是因为它在元素尚未获得任何内容时计算高度。

如何在不使用timeout情况下解决此问题？ 这个问题有没有内置的解决方案？

Plunkr

Answer 1

问题是ng-repeat懒惰渲染，链接函数在此之前被触发。 您可以通过让watcher在每个摘要周期评估elem[0].offsetHeight值来解决此问题。 因此，当ng-repeat完成渲染时，它会调用一个摘要周期，并且由于elem[0].offsetHeight值的变化，它会调用它的回调。

指示

var app = angular.module('plunker', []);

app.directive('myObject', function(){
  return {
    restrict: 'A',
    link: function(scope, elem){
      var calculateHeight = scope.$watch(function(){
        return elem[0].offsetHeight;
      }, function(newVal, oldVal){
        //my awesome code here.
        console.log(newVal, oldVal);
        calculateHeight(); //de-registering watcher for performance reason
      })
    }
  };
});

在这里演示

---

您可以做的其他替代方法是，您可以将其他指令放在ng-repeat元素上，一旦它完成渲染， $emit将$emit一个事件，然后我们将在指令中有事件监听器，它将监听该事件并计算高度。