javascript - 无法从 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
      })
    }
  };
});

Demo Here

---

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