I'm encountering an issue with using Ion-infinite-scroll within ion-side-menu, as the load more function is not being triggered.
Is it permitted to utilize ion-infinite-scroll inside ion-side-menu?
Although I have added the directive, the method "loadMore()" is not being executed.
Here is the line of code I am using:
<ion-infinite-scroll on-infinite="loadMore()" ng-if="true" distance="10%"></ion-infinite-scroll>
and this is the loadMore() function:
$scope.loadMore = function() {
console.log("showMore");
};
The complete HTML structure looks like this:
<ion-side-menus enable-menu-with-back-views="true" cache-view="false">
<ion-side-menu-content ng-class="{'opaque-content' : isMenuOpen}">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon" menu-toggle="left">
<img class="menu-icon" src="img/menu-icon.png" />
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<div class="button-icon">
<img ng-show="showUserImage" class="default-channel-image" src="img/default-channel.png" />
<img ng-show="showAnonymouseChannel" class="discussion-title-image img-border" src="img/anonymous-icon.png" />
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="320">
<ion-header-bar class="bar-stable menu-background">
<a class="setting-icon-wrapper" href="#/app/preferences" menu-close>
<img class="settings-icon" src="img/settings.png" />
</a>
<form class="search-input-wrapper" ng-submit="search(discussionFilter.data)">
<input type="text" id="searchFilter" class="search-input" ng-model="discussionFilter.data" placeholder="Find channels..." ng-change="changeSearch(discussionFilter.data)" ng-model-options='{ debounce: 1000 }'/>
<div ng-hide="discussionFilter.data != null && discussionFilter.data != ''" class="search-icon-wrapper" ng-click="search(discussionFilter.data)">
<i class="fa fa-search fa-2 search-icon"></i>
</div>
<div ng-show="discussionFilter.data != null && discussionFilter.data != ''" class="clear-search" data-ng-click="discussionFilter.data = '';search(discussionFilter.data)">
<img src="img/clear-results.png" class="clear-results">
</div>
</form>
</ion-header-bar>
<ion-header-bar class="bar-subheader channels-header short-header" ng-show="discussions.length > 0" ng-class="">
<div class="list-items-header channels-header" ng-show="discussions.length > 0">
<p class="list-header-title">CHANNELS</p>
<div class="create-channel-area" ng-click="MoveToNewChannel()" menu-close>
<img class="plus-icon" src="img/plus-button.png"/>
</div>
</div>
</ion-header-bar>
<ion-content class="channel-headers menu-background" ng-show="discussions.length > 0" ng-click="closeKeyboard()">
<ion-list class="menu-background menu-list" ng-click="closeKeyboard()">
<ion-item class="menu-background" menu-close ng-href="#/app/discussion/{{discussion.id}}" ng-click="closeKeyboard()" ng-repeat="discussion in discussions">
<div class="menu-channel-text" ng-class="{'subject-regular' : discussion.read}"> {{discussion.subject | truncate_word:18}} </div>
</ion-item>
</ion-list>
<!--<ion-infinite-scroll on-infinite="loadMore()" immediate-check="false" ng-if="isMenuOpen && showMoreDiscussions" distance="10%"></ion-infinite-scroll>-->
</ion-content>
</ion-side-menu>
</ion-side-menus>