如何在angularjs填充元素后获取其高度？

Question

我正在执行$http.get以获取JSON数据，然后使用该数据填充视图，类似于：

$scope.getIdeas = function() {
  $http.get(ideasUrl)
    .success(function(data) {
      $scope.ideas = data;
      console.log($(".ideas-list").height()); // No height yet =(
    })
};

这样就填充了视图。

<ul ng-cloak class="ideas-list" ng-init="getIdeas()">
  <li class="idea"
    ng-repeat="idea in ideas"
    >{{idea.text}}</li>
</ul>

然而，在success调用时，.ideas-list还没有高度。我该如何获取填充视图的高度？是否有可以挂钩的事件？

- zlog

---

在编写问题和答案时，将jQuery与Angular混合使用是不合适的，这会导致问题和答案变得更加模糊。在Angular中，最佳做法是不要将jQuery与之混合使用，因为它与Angular的模型背道而驰，也不是“Angular方式”的体现。原因在于，jQuery直接作用于DOM，这与Angular中DOM由渲染引擎生成的事实相冲突，可能会导致冲突（通常是糟糕/奇怪/不可预测的）。我希望看到一个纯Angular的解决方案，而不是混合Angular/jQuery的解决方案。 - tpartee

Answer 1

使用 setTimeout （或更好的是使用 $timeout 服务），这样在检查高度之前，Angular 可以改变 DOM：

$scope.getIdeas = function() {
  $http.get(ideasUrl)
    .success(function(data) {
      $scope.ideas = data;
      $timeout(function(){
        console.log($(".ideas-list").height());
      });
  })
};

- joakimbl

---

太好了，它可以工作！但是这非常不直观。Angular又是如何知道正确的超时时间的呢？ - zlog

当您向$scope添加数据时，DOM在Angular检测到此更改并重建DOM之前不会更新。由于成功回调被包装在$apply中，因此更改将在同一执行线程中发生。这就是为什么您可以只添加一个没有延迟的setTimeout（就像告诉程序先完成它即将要做的所有事情，然后执行超时回调函数）。 - joakimbl

这在移动设备上似乎不起作用，也许线程在那里工作方式不同？ - zlog

尝试添加一个小延迟：$timeout(function(){ console.log($(".ideas-list").height()); },100); - joakimbl

结果证明你还是对的（没有延迟）。在移动设备上计算不正确的是.height()。使用height = data.length * $(".ideas-list").outerHeight();修复了它。 - zlog