Link in side menu breaks view updates

ionic-v1
1

My app has a parent state with a side menu. One of the child states has tabs, which load content into a sub-child (grandchild) view:

  • Parent with sidemenu
    • Child 1
    • Child 2
    • Child 3 with tabs
      • Grandchild 1
      • Grandchild 2

Everything works fine - issuing $state.go from a child state happily loads a grandchild state and everything works properly…unless that $state.go is called from the original sidemenu. Then the grandchild view stops updating. It can still call methods in its controller, but the view will not update based on the models in its controller, even if $state.$apply() is called.

Any ideas?

2

So after hunting this down, I have worked out what the problem is: it arises because of a stale reference to the controller.

Both grandchild tabs are of the form /page/{pid} [with the contents being differentiated based on {pid}]. However, they therefore have instances of the same controller with the same first line: “pageCtrl=this”. When you go straight from the first to the second and back again, the pageCtrl reference becomes stale, and prevents the data in the controller for Grandchild 1 from being updated - when I went via the home state, this line was re-run so the stale reference was updated.

Has anyone observed this issue before? It seems like a fairly serious flaw, and I have never seen a best practice that would have avoided it?

3

In case anyone else comes across this same issue in future, I eventually figured out (essentially by trying everything under the sun) that the fix is to use:

var pageCtrl=this;

I guess this is predicated on slightly obscure scope issues behind the scenes in angular. I’ve certainly seen the line with AND without “var” in ‘model code’. Whatever. It seems it now works.