Collection repeat repaint every time tab view is loaded

Hi there guys,

I have a tab view exclusively for presenting a list rendered with a ‘collection-repeat’ directive.

When I update the rootscope property that holds the data to render while in another view (other than that with the collection-repeat) when I switch back to the list view, the list has all elements rendered only in the space of one (all of them are on top of each other) but it correctly updates the DOM with the link function of its items content directive.

However when I update the rootscope property through the list’s ion-refresher (I use the same service as before to update it) all the elements in the list are visible but the DOM doesn’t get updated with each item’s directive link function.

Can I do something to repaint the list every time I change to the list’s view state?

As soon as I can I’ll post a codepen to try and reproduce this problem.

I received today a PM asking me if I solved this problem already so I’ll just post here my response for future reference :).

Here it goes:

Hi there!

Yeah, I did find a solution!
However I dropped the collection repeat as it was seriously turning down performance on Android, keep that in mind. :wink:

That being said, I kind of hacked through it and did it watching state change in the controller:

$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if(toState.name == "[name_of_your_collection_state]") {
        $(root)scope.[your_list_object] = angular.copy($(root)scope.[your_list_object]);
    }
});

So what I’m doing there is make an exact copy of the object and assigning it to the same scope/rootscope var as before and in angular’s digest cycle it will render the whole page again with the same or updated values.