Hey there! I’m creating a view with 2 tabs, each tab has a list inside it. I think it’s a common pattern but the behavior I see is weird. Each time I change the tab and come back to it, the list items are duplicated. I don’t know if my code is wrong or it really exists an issue with ng-repeat directive inside tabs.
I was getting this issue too and I’m not sure if I solved it correctly or just botched it (but it does what I want it to do). Basically I setup my list using tab.shown broadcast and cleared it all on tab.hidden.
$scope.$on('tab.shown', function() {
$scope.loading = true; // Hide content and show spinner
$scope.Items = Items.get(function () {
$scope.loading = false; // Show content and hide spinner
});
});
$scope.$on('tab.hidden', function () {
$scope.Items = []; // Tear down
});
I’m having this same issue as well, where I am have dynamically created tabs that load some text and an array of images and the solution above does not work in my situation. My tab mark up looks like this
This does not get called here. Where is tab.shown documentend? I could not find anything about it. Have i missed something? I put that 2 lines in several controllers but i never see it in the console when i switch the tabs.
I replaced my <ion-list> with <div class="list"> which seems to stop that duplication of the wrapping elements.
But it looks like the whole <ion-content> is duplicated on each tab-switch. I see multiple nested <div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);"> wrappers growing on each tab switch.
EDIT: i’ve found the related issue on that: https://github.com/driftyco/ionic/issues/2951
Weird that the cache config is causing this. When i removed $ionicConfigProvider.views.maxCache(0); it solved my issue.