State switching

ionic-v1
1

Hey guys,

having 2 states, root one and it’s child one

$stateProvider.state('main', {
    url: '/main',
    templateUrl: 'main.html',
    controller: 'MyCtrl'
});
$stateProvider.state('main.content', {
    url: '/content',
    views: {
        content: {
            templateUrl: 'main-content.html',
            controller: 'MyCtrl'
        }
    }
});

and the markup for main state looking like this

<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<ion-tabs class="tabs-positive">
    <ion-tab icon="ion-home" ui-sref="main.content">
        <ion-nav-view name="content"></ion-nav-view>
    </ion-tab>
</ion-tabs>

when I wanna switch to the main state using $state.go('main'), I end up being in the main.content state instead. What is the reason for this? Is it because of the nested nav-view so it’s looking for a child state and switches to it?

Thanks in advance

2

So the reason is because tabs expect those parents states to be abstract, unnavigable states.

So what you are trying to achieve isn’t going to be possible.
You should just create another nested state that is a sibling of main.content

3

I do understand that the code is not correct, however, I still do not understand what exactly causes going into different state? I assume nav-view doesn’t change states. So how do I end up in state main.content when trying to switch to main? My personal guess would be that ui-router notices that there’s more ion-views than actually available views to populate them with so it searches for a child state. Just a wild guess.

4

Could you put a small demo together in a codepen?

5

Sorry for the delay, was on vacation. Reinstalling ionic fixed the issue.