如何使用 AngularJS 动态获取 div 的内容高度？

在前端开发中，经常需要获取某个 div 元素的高度，以便做一些布局和动画等操作。本文将介绍如何使用 AngularJS 动态获取 div 的内容高度。

方法一：使用 $timeout

app.controller('myController', function($scope, $timeout) {
  $timeout(function() {
    var divHeight = angular.element('#myDiv').height();
    console.log(divHeight);
  });
});

在控制器中使用 $timeout 函数可以在 AngularJS 生命周期中的下一个循环中获取 div 的高度。这样做的好处是可以确保元素已经被渲染完毕，但是需要注意的是 $timeout 函数会等待当前 JS 执行完成后再执行。

方法二：使用 $evalAsync

app.controller('myController', function($scope) {
  $scope.$evalAsync(function() {
    var divHeight = angular.element('#myDiv').height();
    console.log(divHeight);
  });
});

使用 $evalAsync 函数可以立即获取 div 的高度，不需要等待当前 JS 执行完成，但是需要注意这个函数只会在本次循环之后执行一次。

方法三：自定义指令

app.directive('getHeight', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var divHeight = element.height();
      console.log(divHeight);
    }
  };
});

通过自定义指令，可以在元素渲染完成之后立即获取 div 的高度，而且这个方法可以复用在其他地方。

以上就是三种获取 div 高度的方法，根据实际需求选择适合自己的方法即可。