无法从 AngularJS 中的元素计算偏移高度

Can't calculate offsetHeight from an element in AngularJS

本文关键字：计算 高度 元素 AngularJS      更新时间：2023-09-26

我有以下指令：

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

这基本上是记录其目标元素的offsetHeight，但它不起作用。我想这是因为当元素没有任何内容时，它会计算高度。

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

普伦克

尔

问题是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一个事件，然后我们将在指令中有一个事件侦听器，它将侦听该事件并计算高度。

相关文章：