fetch the height of an element - angularjs

Question

I'm writing a pagination function in an angular app. I have got a <div> container, that has a size depending on the window size. In that container, there is my list. Now this list has to be split into n pages to avoid having a scrollbar. Everything works fine yet, except for the fact, that I have to hardcode the height of a list element.
What I need to calculate the number of pages for the pagination is:
The length of the list (number of list items),
the height of the container (refreshed on each window.onresize) and
the height of one list element.
I am able to keep track of the list length. I am also able to fetch the height of the container and to refresh that value on window.onresize.
But I am not able to fetch the height of a list element in the DOM tree.
I've written a directive, to pass the scope and selector names from a template into my code:
<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>
My directive looks like this right now:
'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();
}
}
};
});
When I run my application, the list is empty, so there is no <li> and itemElement.height() returns 0. Then my list becomes updated, then the setPageSize() will be called again, but itemElement.height() still returns 0. I think it is, because this code is executed before the list will be rendered into the page. Do you have any idea, how I can archive this? Right now, I have the height of an element hardcoded and the best compromise I see is to pass the height value from the template to the directive:
<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>
But then still I have to change the templates if we have a change in the style sheets. I also don't want to write a timeout. Maybe there is an event angular fires after updating the DOM tree?

Answer 1

A little hack you could do to get around this is to have a 'dummy' list item on load. Unfortunately it does need to be visible at render time. So you could do something like this, that way you have a <li> Item rendered and the should be enough to get it to have some height without any content being visible to the user while your data is being fetched.
<ul>
<li class="dummy-item"
ng-show="!listMode.pageItems.length"><a> </a></li>
<li ng-repeat="item in listmodel.pageItems">
<a ng-click="mymodule.selectItem(item)">{{item.id}} ({{item.type}})</a></li>
</ul>
I know this is an old question but hope it still helps.