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一个事件。那么我们将在内部指令中使用事件监听器，它将监听该事件并计算高度。

无法从AngularJS中的元素计算offsetHeight

1 个答案: