State childs hierarchy problem

ionic-v1
1

I have a problem, i think, with the declaration of the state hierarchy in my project. I have child that doesnt go back to its parent.

I explain the case:
I have a root menu with 2 options (welcome and myprojects). The “my projects” option prints a lists of projects.
When you click on an item from the list another menu with a button is shown (Gestor button).
When I click in this second buttom a list with the people included on that project is shown.
All the back buttons works perfectly except the last back button (the one that appears at the people list on the project) that doesnt work. In this case the click buttom doesnt go back.

I know that the url changes to the parent one but the view isnt updated.

Here is a codepen of it.

See the Pen tAopx by sandra (@pika) on CodePen.

2

Ähm your problem is that your states and ion-nav-views are wrong.

You are using a bunch of ion-nav-views that you do not need.
Inspect your html source code with chrome tools.

you have an ion-nav-view in an ion-view -> thats why both are shown and the person-list overlats the “gestor” button.

Maybe you have to rethink your app-structure.
You do not need a new ion-nav-view for each state.
You can reuse the first one.

3

Thank you.
I have seen that it works with the same ion-nav-vien when I configure all the states at the same level of the hierarchy (all of the states are child of app).
But it doesnt work when a state is a child of another. For example when I have the states “projectMenu” and “projectMenu.workers”, the second one doesnt load.

4

This sould also work.

You could use abstract states for that:

you have a list and a detail view, then you can introduce an abstract state that handles the list and the detail view.

.state('base', {
                url: '/base',
                templateUrl: 'base.html'
            })
            .state('base.list', {
                url: 'list',
                templateUrl: 'list.html'
            })
            .state('base.detail', {
                url: 'detail/:id',
                templateUrl: 'detail.html'
            })

So you have a state: base -> this is not directly callable through the url
and 2 substates. 1 for the list and 1 for the detail view

In your base template you only add:

<ion-nav-view></ion-nav-view>

and both states for list and detail would hang in there.

1 Like