Angularjs 获取元素的高度

我正在angular应用程序中编写分页函数。我有一个

容器，它的大小取决于窗口的大小。在那个容器里，有我的清单。现在，必须将此列表拆分为n页，以避免出现滚动条。一切都很好，除了我必须硬编码列表元素的高度这一事实

我需要计算分页的页数是：

• 列表的长度（列表项的数量）
• 容器的高度（在每个

  窗口上刷新。onresize

  ）和
• 一个列表元素的高度

我能够跟踪列表的长度。我还能够获取容器的高度，并在

window.onresize

上刷新该值

但是我无法获取DOM树中列表元素的高度

我编写了一个指令，将范围和选择器名称从模板传递到代码中：

<div class="multicolumn-list" ng-controller="mymodule.listtypes.multicolumn.controller">
    <pagination-updater space-selector=".list-spacer" item-selector="li:first" page-size-model="listmodel.pageSize" listen="listmodel.list.items">
        <div class="list-spacer">
            <ul>
                <li ng-repeat="item in listmodel.pageItems">
                    <a ng-click="mymodule.selectItem(item)">{{item.id}} ({{item.type}})</a>
                </li>
            </ul>
        </div>
    </pagination-updater>
</div>

当我运行我的应用程序时，列表是空的，因此没有

和

itemElement.height（）

返回

0

。然后我的列表被更新，然后将再次调用

setPageSize（）

，但是

itemElement.height（）

仍然返回

0

。我认为是的，因为这段代码是在列表呈现到页面之前执行的。你知道我怎么把这个存档吗？现在，我已经硬编码了元素的高度，我看到的最佳折衷方案是将高度值从模板传递到指令：

<div class="multicolumn-list" ng-controller="mymodule.listtypes.multicolumn.controller">
    <pagination-updater space-selector=".list-spacer" item-height="{{main.zoomFactor}} * 26 + 1" page-size-model="listmodel.pageSize" listen="listmodel.list.items">
        <div class="list-spacer">
            <ul>
                <li ng-repeat="item in listmodel.pageItems">
                    <a ng-click="mymodule.selectItem(item)">{{item.id}} ({{item.type}})</a>
                </li>
            </ul>
        </div>
    </pagination-updater>
</div>

{{item.id}}（{{item.type}}）

---

但是，如果样式表中有更改，我仍然必须更改模板。我也不想写一个超时。更新DOM树后可能会发生事件？

要解决这个问题，您可以做一个小技巧，就是加载一个“虚拟”列表项。不幸的是，它确实需要在渲染时可见。因此，您可以这样做，这样您可以呈现一个

项目，并且

应该足以使其具有一定的高度，而在获取数据时用户不会看到任何内容

<ul>
  <li class="dummy-item"
      ng-show="!listMode.pageItems.length"><a>&nbsp;</a></li>
  <li ng-repeat="item in listmodel.pageItems">
      <a ng-click="mymodule.selectItem(item)">{{item.id}} ({{item.type}})</a></li>
</ul>

{{item.id}}（{{item.type}}）

我知道这是一个老问题，但希望它仍然有帮助

<ul>
  <li class="dummy-item"
      ng-show="!listMode.pageItems.length"><a>&nbsp;</a></li>
  <li ng-repeat="item in listmodel.pageItems">
      <a ng-click="mymodule.selectItem(item)">{{item.id}} ({{item.type}})</a></li>
</ul>