2

我正在一个角度应用程序中编写一个分页功能。我有一个<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 树后可能有一个事件角触发？

4

1 回答 1

0

你可以做一个小技巧来解决这个问题，就是加载一个“虚拟”列表项。不幸的是，它确实需要在渲染时可见。所以你可以做这样的事情，这样你就可以<li>渲染一个 Item 并且&nbsp;应该足以让它有一定的高度，而在你的数据被获取时没有任何内容对用户可见。

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

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

于 2014-06-27T23:00:34.070 回答