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正在为0返回ul。

var h = theHeight.style.height;没有返回任何内容。

我不想在这里使用 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);
}

特雷弗的答案更好，因为它是角度超时服务。

Answer 3

Working Plunker：http://plnkr.co/edit/RH1IBRVoowWFUoWvHGY8?p=preview

围绕$ timeout调用包裹你的代码。初始化控制器时，DOM尚未更新，这就是你需要用$ timeout包装它的原因。

cell.accessoryView.translatesAutoresizingMaskIntoConstraints = NO;

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

3 个答案: