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:
- Ui-router URL changes, nested view not loading
- In Angular ui-router nested state url changes,but template is not loading
- UI-Router: URL changes, but view is not loaded
- Angular Router - Url changes but view does not load
- URL changes but view does not hcange
- 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.
