Deleting an item from infinite scroll collection displays spinner indefinitely


#1

Hi, I have the following html:
<ion-view title="Page1" cache-view="false"> <ion-content class="has-header padding" delegate-handle="followerScroll"> <div class="row centeredText"> <h4>Count: {{count}}</h4> </div> <ion-list> <ion-item ng-repeat="person in people"> <div class="row" ng-click="selectPerson(person)"> <p>{{person.name}}</p> <div class="col text-right"><span class="pull-right"><i class="icon ion-close" ng-click="delete(person);" stop-event="click"></i></span></div> </div> </ion-item> <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" immediate-check="false" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> </ion-list> </ion-content> </ion-view>

with the following controller JS:

$scope.delete = function(person) { $ionicPopup.confirm({ title: 'Confirmation', template: 'Are you sure you want to delete ' + person.displayname + '?' }).then(function(res) { if (res) { Dataservice.unfollow(person).then(function(result) { //remove this from the list. var i = $scope.people.indexOf(person); $scope.people.splice(i, 1); $scope.count--; $ionicScrollDelegate.$getByHandle('userScroll').resize(); $scope.$broadcast('scroll.infiniteScrollComplete'); }, function (err) { $scope.$broadcast('scroll.infiniteScrollComplete'); }); } }); }

The issue I have is that whenever I splice the people array, the infinite scroll’s spinner appears, and I am not able to hide it again. I am reasonably certain it is because the scroll area is resizing which is why I decided to do a
$ionicScrollDelegate.$getByHandle('userScroll').resize(); $ionicScrollDelegate.$getByHandle('userScroll').resize();

This did not solve the problem.

Please let me know if you have any insights, I sincerely appreciate your help! Thank you.