Lazy loading in slidebox


#1

I’ve a slidebox under which are three slides. First slide is simply a menu, the other two slides are dynamic lists with lazy loading. Now, if I scroll my first slide, the code for lazy loading of second and third slide gets called. I’ve tried fixing it but could not find any solutions. Please enlighten me with a solution.
A sample of my template is as following:

<ion-content class="page player-page"
             delegate-handle="player-slides"
             style="top:90px"
             locking="true"
             ng-hide="playlist && playlist.length>0">
    <ion-slide-box has-bouncing="false"
                   on-slide-changed="switchSlide($index)"
                   show-pager="false"
                   active-slide="activeSlide">
    <ion-slide class="overview">

        <div class="one-section padding">
            <div class="header">
                <span>My Playlists</span>
            </div>
            Please login to access your playlists or Sign up to create your playlists
            <div class="text-center" style="margin-top: 10px">
                <button type="button"
                        class="btn btn-theme">
                    Login
                </button>
                <button type="button"
                        class="btn btn-theme">
                    Signup
                </button>
            </div>
        </div>
        <div class="one-section padding">
            <div class="header">
                <span>Latest</span>
            </div>
            <div class="list">
                <div class="item">
                    <a ui-sref="tab.player({tab:1,filter:'latest'})">
                        <img src="img/dummy.png">
                        <div class="info">
                            Songs
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/dummy.png">
                        <div class="info">
                            Albums
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/dummy.png">
                        <div class="info">
                            Playlists
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/dummy.png">
                        <div class="info">
                            History
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </ion-slide>

    <ion-slide>
        <ng-include src=" 'views/list/tracks-list.html' "></ng-include>
    </ion-slide>
</ion-slide-box>

tracks-list.html is again a dynamic list which displays list, depending upon the type passed. It’s template is as following:

<ion-content scrollbar="false"
 has-bouncing="false"
 class="list"
 ng-if="$parent.tracksList.length>0">
<ion-list>
    <div class="item item-avatar-left"
         id="audio{{item.trackId}}"
         ng-click="$parent.playTrack(item)"
         ng-repeat="item in $parent.tracksList">
        <img src="{{::item.thumbImage}}">
        <h3>{{::item.trackTitle}}</h3>
        <p>{{item.artists.length>0 ?item.artists[0].artistName+' | ' :''}}{{::item.albumYear}}
        </p>
    </div>
    <ion-infinite-scroll
            on-infinite="$parent.getList()"
            distance="15%">
    </ion-infinite-scroll>
</ion-list>
When scrolling slide 1, the `getList()` function gets called. I could not understand why!

#2

I have same problem.
Did you fixed this?