無法從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一個事件，然后我們將在指令中有事件監聽器，它將監聽該事件並計算高度。