如何获得我的 ul 元素的高度？ AngularJS 没有 jQuery

Question

Plnkr http://plnkr.co/edit/a7oV4gWzJG532RSqqOt3?p=preview

我正在 Angular 项目中构建我自己的无限滚动功能，我需要获取我的 ul 的高度。

目前我正在使用这个：

标记

<ul id="tags-list">
  <li ng-repeat="t in tags">
    <div class="tag"
      ng-mouseover="showTagDetails(t)"
      ng-mouseleave="leaveTag(t)"
      ng-click="sendTag(t)">{{t.name}}</div>
    <tag-details tag="t"></tag-details>
  </li>
</ul>

控制器

if ($scope.tags.length != 0 || $scope.tags.length != undefined) {
    var theHeight = document.getElementById('tags-list').offsetHeight;
    // var h = theHeight.style.height;
    console.log(theHeight);
}

.offsetHeight 出于某种原因 returning 0 我的 ul。

var h = theHeight.style.height; 没有 return 任何东西。

我不想在这里使用jQuery来获取高度，你会怎么做？

Answer 1

用 $timeout 将代码包裹在 if 语句中，为 Angular 提供更改 DOM:

所需的时间

$timeout(function(){
  var theHeight = document.getElementById('tags-list').offsetHeight;
  console.log(theHeight);
});

Answer 2

我能够显示实际计算高度的唯一方法是等待 Angular 通过强制超时重新渲染 DOM。

if ($scope.tags.length != 0 || $scope.tags.length != undefined) {
    var list= document.getElementById('tags-list');
    setTimeout(function(){
        console.log( list.offsetHeight );
    }, 100);
}

trevor 的回答更好，因为它是 angular 超时服务。

Answer 3

工作的 Plunker：http://plnkr.co/edit/RH1IBRVoowWFUoWvHGY8?p=preview

围绕 $timeout 调用包装您的代码。当您的控制器初始化时，DOM 尚未更新，这就是为什么您需要用 $timeout 包装它。

$timeout(function() {
  if ($scope.tags.length != 0 || $scope.tags.length != undefined) {
    var theHeight = document.getElementById('tags-list').offsetHeight;
    // var h = theHeight.style.height;
    console.log(theHeight);
  }
});

如何获得我的 ul 元素的高度？ AngularJS 没有 jQuery

How to get height of my ul element? In AngularJS without jQuery

javascript

html-lists

angularjs

angularjs-ng-repeat