View is showing old (ghost) scope variables

Hello all awesome Ionic developers,

First post here! I have been developing apps with Ionic for the last couple of months, and I love it more and more everyday! I have had no problems that I couldn’t find an answer for before now so here it goes, hope you can help me out.

I have an issue with old scope variables not being cleared/hanging around in the view when navigating between different states within the same tab. The issue is particularly hard to debug because it only occurs when testing on the device itself, which leads me to believe
that it is not a scope issue or similar. This is the reason why I have decided not to attach a codepen here at first.

Changing states within the same tab will sometimes (occurs randomly but only after navigating between states) see an old scope variable “hanging around”. The new scope variable will display “on top of it” See screenshot. The old value will disappear if the view is refreshed (e.g. I change the device to landscape from portrait) which leads me to believe
that it’s not a scope issue (as mentioned also works without problems when debugging on browser) but is likely related to tab history.

I attach some screenshots along with explanations to illustrate.

Here at the top it shows “27 Destinations found” on top of “0 Destinations found” (the variable here is the length of result array). The issue is clear when I start to scroll the list upwards.

“0 Destinations found” stays put statically, while the new value scrolls up with the list correctly. If I change the device perspective it will display correctly.

I’m puzzled ! I am testing on an iPhone5 7.0.

Thank you for taking the time to read. If I need to describe the issue at a more technical level I will of course do so.

1 Like

You could clear the variables like this.

var a = $
scope.$on('$destroy', a);

Hello @mhartington !

Thanks for your response. It sounds plausible that clearing the scope variables would help with the issue, but I just tried it out, and the $destroy event takes a function as parameter, so I don’t understand how to pass the variable as suggested. Can you please elaborate?

All variables are correctly updated until I after the first state transition, where scope seems to go out of sync and it appears pretty randomly.

It turns out that a nightly Ionic stylesheet was somehow causing views to not be rendered correctly when navigating through views on a particular tab. Everything would be drawn on top of the old view, which was causing the old scope variables to be seen.

Updating to a newer stylesheet solved the issue.

1 Like