ngInfiniteScroll Triggered Once Upon Page Loading

Question

I am using ngInfiniteScroll on my webpage to allow for infinite scrolling. I have it working except for one thing. When the page initially loads, ngInfiniteScroll seems to get triggered and I don't know why.

I attach ngInfiniteScroll to a link which appears at the bottom of the last post.

Here is what my code looks like:

<div style="height: 100px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
<a infinite-scroll="nextPosts()" href ng-click="nextPosts()" class="show-more">Show more</a>
</div>

It will trigger because it will always loaded before your ngRepeat items are fully loaded your container height is not tall enough to cover up the directive. It can trigger further more if your ngRepeat items not loaded with enough items to cover up the directive. You should check if item.length < 1 you need to return. — wayne, Nov 07 '14 at 03:45
Ok, so are you saying that right when I load the page, there are no posts loaded yet, so the appears at the top of the page and triggers ngInfiniteScroll. Then they all load and it is far below the bottom of the page so it stops triggering ngInfiniteScroll. So basically I should check if posts have loaded, and if they have not, then when the ngInfiniteScroll is triggered, tell it not to do anything? — mattman88, Nov 07 '14 at 03:48
I am super new to javascript...do you have any suggestions for how I might accomplish this? Is there a way I can have the page not process the until all of the posts are loaded? Thanks for the help btw — mattman88, Nov 07 '14 at 03:55
nextPosts function first line, if (scope.items.feed.length < 1) return; — wayne, Nov 07 '14 at 04:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64457/discussion-between-mattman88-and-wayne). — mattman88, Nov 07 '14 at 05:30
I'll try it on here, but it is trying to make me go to chat, since it doesn't want extended convo in the comments. Anyways, had another question I think you might be able to help out on if you're interested. I have that style="height: 100px" because without it the infinite scroll is triggered by any scroll, no matter where I am on the page the ngInfiniteScroll guys explain it like this "The infiniteScroll directive uses the height of the element that it's attached to in order to determine how close to the bottom of the window it is. — mattman88, Nov 07 '14 at 05:46
...In some cases, the browser can report a height of 0, which causes this behavior. Usually, this is due to a container element that only contains floated children. The simplest way to fix this problem is to add a "spacer" element to the bottom of the container.(something like
); — mattman88, Nov 07 '14 at 05:46

ngInfiniteScroll Triggered Once Upon Page Loading

0 Answers0