Needs some help with list memory issue

ionic-v1
1

I’m currently having some issues with memory leakage. The list displays some 300 items currently and each time I select another tab and then come back to the “Clients” tab, it doesn’t seem to free up all the memory previously used.

So after about 10 back and forths, memory usage rises to somewhere about 250MB, about 20MB per cycle. During each cycle, only about 30% of the memory for that cycle gets freed up.

I’m guessing either the tab view or the list view is holding on to some references. Anyone have any clues as to what might be holding on to the references? It most definitely is related to the data returned by ClientService. Or is there a manual cleanup step that I should be doing?

Thanks,
Eric

Here are the relevant parts of the code:

Template:

<ion-view title="Clients" right-buttons="rightButtons">
    <ion-content has-header="true" has-tabs="true">
        <ion-refresher on-refresh="doRefresh()"></ion-refresher>
        <ion-list can-swipe="true" option-buttons='optionButtons'>
            <div class="item item-input-inset">
                <label class="item-input-wrapper">
                    <input type="text" placeholder="Search">
                </label>
            </div>
            <ion-item ng-repeat="client in clients" href="#/tab/clients/{{ client.id }}">
                <h3>{{ client.name }}</h3>
                <p>{{ client.address_line1 }}</p>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Router:

.state('tab.client-index', {
    url: '/clients',
    views: {
        'clients-tab': {
            templateUrl: 'templates/client-index.html',
            controller: 'ClientIndexCtrl'
        }
    },
    resolve: {
        clients: function(ClientService, $ionicLoading) {
            var loadingIndicator = $ionicLoading.show({
                content: 'Loading...',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 500
            });
            
            return ClientService.query({}, function() {
                loadingIndicator.hide();
            }, function() {
                loadingIndicator.hide();
            });
        }
    }
})

Controller:

.controller('ClientIndexCtrl', function($scope, clients) {
    $scope.clients = clients;
    
    $scope.rightButtons = [
        {
            type: "button button-clear",
            content: '<i class="icon ion-ios7-plus-empty"></i>',
            tap: function(e) {
                
            }
        }
    ];
    
    $scope.optionButtons = [
        {
            text: "Delete",
            type: "button button-assertive",
            onTap: function(item) {
                ClientService.del(item.id);
            }
        }
    ];
})

Service:

.factory('ClientService', function($resource) {
    return $resource('https://.../clients/:clientId');
});
2

Can you try adding a $scope.$destroy listener on your tab controller and then deleting the scope variable that holds your list items?

3

Just tried it, the callback is firing, and I’m doing:

$scope.clients = null;

But memory usage is still showing the same behavior. I suspect that the individual list item objects might be holding on to objects in the array of clients… Any thoughts?

I installed Angular Batarang to try and inspect the app, but can’t figure out what to look for.