Question

我正在角应用程序中编写分页功能。我有一个<div>容器，其大小取决于窗口大小。在那个容器中，有我的清单。现在这个列表必须分成n个页面以避免使用滚动条。一切都运行正常，除了事实，我必须硬编码列表元素的高度。

我需要计算分页的页数：

列表的长度（列表项的数量），
容器的高度（在每个window.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>

我的指令现在看起来像这样：

'use strict';

angular.module('shared.directives.paginationUpdater', ['shared.services.dimensions']);
angular.module('shared.directives.paginationUpdater').directive('paginationUpdater', function() {
    return {
        restrict: 'E',
        link: {
            'post': function (scope, iElement, iAttrs, controller) {

                var pageSizeModelName = iAttrs.pageSizeModel;

                var setPageSize = function () {

                    var spaceElement = iElement.find(iAttrs.spaceSelector);
                    var itemElement = iElement.find(iAttrs.itemSelector);

                    console.log(itemElement.height());
                };
                scope.$watch('$parent.' + iAttrs.listen, function () { setPageSize(); }, true);
                scope.$on('windowResized', function () { setPageSize(); });
                setPageSize();
            }
        }
    };
});

当我运行我的应用程序时，列表为空，因此没有<li>和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>

但是如果我们在样式表中进行了更改，我仍然需要更改模板。我也不想写超时。更新DOM树后可能会发生事件角点火灾？

Answer 1

你可以做的有点蠢事就是要有一个“虚拟”＆＃39;加载列表项。不幸的是，它确实需要在渲染时可见。所以你可以做这样的事情，这样你就可以渲染一个<li>项目，而 应该足以使它具有一定的高度，而在你的数据存在时用户看不到任何内容牵强。

<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>

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

获取元素的高度

1 个答案: