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!