I'm using ui-scroll to implement infinite scrolling in my Angular application.
It's working perfectly and I'm using it to display a list of events.
However, when my app loads, it displays the first events by default (the index 1
actually). To see the most recent events, one has to scroll down the event list. This is a problem when the events list is really large and kind-of defeats the point of paginated loading because the web app has to go through all the events to get the most recent ones.
How can I instruct ui-scroll to start with the last events ? Obviously, I have a backend method (a HEAD
request that I can use to fetch the total count of events) to get the initially desired index. I just can't find a way to put that initial index in ui-scroll.
Any clue ?
As requested, here is a code sample, although it's pretty "standard" ui-scroll stuff:
<ul ui-scroll-viewport class="event-list" ng-class="{loading: eventsLoading}">
<li ui-scroll="event in eventsProvider" data-buffer-size="20" is-loading="eventsLoading">
<p>event.text</p>
</li>
</ul>
Here is what I have in the controller:
$scope.eventsProvider = {
get: function(index, count, success) {
$scope.events = ZoneEventsService.query({
session_type: $scope.session_type,
zone: $scope.zone,
offset: index - 1,
limit: count
}, function(result) {
success(result.items);
});
}
};
I actually found a way. In my controller, I defer the first loading of the data and manually offset my offset by the total count of events. Since ui-scroll handles negative offsets out-of-the-box, it just works.