ng-infinite-scroll with ng-show and sticky states

Question

I am new to angular. In my single page web app, I have two tabs with ng-infinite-scroll in each of them. The two tabs are traversed between using a nav-bar,

    <div ng-show="$state.includes('base.videolist')||$state.includes('base.movielist')  ">
<ul class="nav navbar-fixed-top roboto nav-tabs">
   <li ui-sref="base.videolist" ui-sref-active="active"><a>Videos</a></li>
   <li ui-sref="base.movielist" ui-sref-active="active"><a>Movies</a></li>
</ul>
</div>

and each tab resides in two ui-views as shown below.

<div id="bvl" ui-view="videolist" ng-show="$state.includes('base.videolist')"></div>
<div id="bml" ui-view="movielist" ng-show="$state.includes('base.movielist')"></div>

When using ng-show, the height of the hidden div is set to 0 by angular. thereby triggering the infinite-scroll infintely.

I dont want to use ng-if because i want to maintain the scroll state of the lists.

How to handle this?

PS. i use sticky states for both the lists to maintain states between master detail view of the list elements.

@Ladmerc I don't know how to get both the scrollers to work. — 55597, Nov 27 '16 at 10:54
The documentation here https://github.com/sroze/ngInfiniteScroll says that you should define `
`; that's assuming you have defined `myPagingFunction` in the controller — Ladmerc, Nov 27 '16 at 11:07
@Ladmerc the functions are triggered properly. The issue is with the timing of the trigger. The trigger is fired multiple times because the height of one div is set to 0 because of ng-show — 55597, Nov 27 '16 at 11:22
@Aruna i am not sure how to create a fiddle as the page tries to pull data from my local database. — 55597, Dec 03 '16 at 11:22

score 2 · Accepted Answer · answered Dec 03 '16 at 12:50

from https://sroze.github.io/ngInfiniteScroll/documentation.html

infinite-scroll-disabled (optional) - {boolean} - A boolean expression that, when true, indicates that the infininite scroll expression should not be evaluated even if all other conditions are met.

If you want to use ng-show="showIt" to hide an element containing an infinite scroll, you can add infinite-scroll-disabled="!showIt" to stop it from trying to load more items while hidden.

Here is a jsbin example with 2 infinite scrolling divs that can each be hidden with ng-show without the hidden infinite scroll trying to load more items every time you scroll.

how to maintain the scroll states of each of the divs when switching between them? — 55597, Dec 07 '16 at 13:46

ng-infinite-scroll with ng-show and sticky states

1 Answers1