CODEWITHSUNDEEP
ionic-frameworkangular-ui-router
Andrea Aloi
Andrea Aloi

Reputation: 991

Ionic UI Router issue: 2nd level state views not loading

I can't wrap my head around this issue I've been experiencing, or perhaps I'm missing some crucial point here. I jotted down this sample app on ionic playground, it is of course a simplified version of my app.
Basically I have a tabbed layout with two views which share a common datasource of items (in my app it's a sqlite db table); the first view displays items in a certain state whereas the other tab display the remaining items (in my example I've used the TODO list metaphor).
Each tab has a child state which I refer to as 2nd-level state (assuming level 0 is the abstract tab state. These two 2nd-level states are defined separately but share a common controller and template.
I cannot for the life of me understand why these two states aren't being navigated to when I click on a list item from either of the two lists (1st-level state views).
NOTE: In the ionic playground no error is thrown in the console, but I can't quite tell what is going on in terms of state URLs. But when I test my actual app (where the problem is the same) in a browser I can see the URL changing to #/tab/tasks/xxxx or #/tab/completed/xxxx but template is not loading. Upon googling I came across several SO questions:

  1. Ui-router URL changes, nested view not loading
  2. In Angular ui-router nested state url changes,but template is not loading
  3. UI-Router: URL changes, but view is not loaded
  4. Angular Router - Url changes but view does not load
  5. URL changes but view does not hcange
  6. Angular UI-Router : URL changed but view isn't loaded

but the answers provided therein haven't worked for me (tried, as per the last one I listed, to add the @ sign after the view name in the child states, but to no avail).

Kinda stuck, would really appreciate some input! Cheers.

Upvotes: 0

Views: 104

Answers (1)

Andrea Aloi
Andrea Aloi

Reputation: 991

Managed to get it working following this answer; I had previously tried simply appending the @ character after the view name in nested states but it turns out the trick was to append @tab, where tab is the name of the top-level abstract state. I updated my fiddle on ionic playground. Cheers to you all.

Upvotes: 0

Related Questions