Can't navigate to nested state without ui-sref on the tab

@mjay76 wrote:

Hello,

i'm totally new to ionic and i try to build my first app, but i cant't really handle the routing.

I have combine a side-menu and some tabs. All top-level routes are accessible over the side-menu, some are over the tabs too. Some top-level routes habe nested states (detail-page). One of the tabs is to toggle the side-menu, because the toggle hast to be at the bottom. But i cant put an ui-sref on it, becase this tab is only for toggle the side-menu and there are more links in the side-menu than one. But without ui-sref i cant acces the "app.kleinanzeigen.filter" state.

What can i do to use tab-sidemenu whithout ui-sref? Or am i totally wrong in my way of doing this?
How can i do it in a better way?

My Routes like this:

        .state('app', {      //This is the base-state for my app with tabs and side-menu
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('app.angebote', {      // no problem
            url: "/angebote",
            views: {
                'tab-angebote': {
                    templateUrl: "templates/angebote.html"
                }
            }
        })

        .state('app.angebote.details', {     // no problem / no parameter because ist's a mockup
            url: "/details",
            views: {
                'tab-angebote@app': {
                    templateUrl: "templates/angebot-details.html"
                }
            }
        })

        .state('app.kleinanzeigen', {     // no problem
            url: "/kleinanzeigen",
            views: {
                'tab-sidemenu': {
                    templateUrl: "templates/kleinanzeigen.html"
                }
            }
        })

        .state('app.kleinanzeigen.details', {     // is not in the navigation //cannot access this route
            url: "/details",
            views: {
                'tab-sidemenu@app': {
                    templateUrl: "templates/kleinanzeigen-details.html"
                }
            }
        })

My menu.html

    <ion-tabs class="tabs-positive"> // No Problem, i can access app.angebite as well as app.angebote.details
        <ion-tab title="Angebote"
                 icon-off="ion-social-octocat"
                 icon-on="ion-social-octocat"
                 ui-sref="app.angebote"
                 ng-click="goTo('app.angebote')">
            <ion-nav-view name="tab-angebote"></ion-nav-view>
        </ion-tab>

        <ion-tab title="SideMenue"
                 icon-off="ion-navicon"
                 icon-on="ion-navicon"
                 ng-click="toggleRightSideMenu()"
                       // ui-sref="app.kleinanzeigen"
                       // if i put this on the tab i can navigate  to app.kleinanzeigen.details, but there are more linkes
                       // on the side-menu, that dont inherit from app.kleinanzeigen.
                 on-select="clearHistory()">
            <ion-nav-view name="tab-sidemenu"></ion-nav-view>
        </ion-tab>

    </ion-tabs>
</ion-side-menu-content>

<!-- Side Menu (left) -->
<ion-side-menu side="right">
    <ion-header-bar class="bar-positive bar-logo">
        <h1 class="title">Menü</h1>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item class="item-divider">Angebote</ion-item>
            <ion-item ui-sref="app.angebote" menu-close="">Angebote</ion-item>

            <ion-item class="item-divider">Kleinanzeigen</ion-item>
            <ion-item ui-sref="app.kleinanzeigen" menu-close="">Kleinanzeigen</ion-item>

// More links ...

Posts: 1

Participants: 1

Read full topic