Ionic Navigation Issue

Question

I am trying to develop the navigation i ionic as follows

AppCtrl to Login or Menu

Then from Menu to Products or Orders or back to Login

My app.html like this

<ion-nav-view name="appContent">
</ion-nav-view>

My menu.html like this

<ion-view>
    <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button>
                </ion-nav-back-button>
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar-stable">
                <h1 class="title"></h1>
            </ion-header-bar>
            <ion-content>
                <ion-list>
                    <ion-item nav-clear menu-close href="#/app/products">
                        Products
                    </ion-item>
                  <ion-item nav-clear menu-close href="#/app/orders">
                        Orders
                    </ion-item>
                    <ion-item nav-clear menu-close ng-click="logout()">
                        Logout
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

And my state configurations are like this

$stateProvider

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "app/views/app.html",
        controller: 'AppCtrl'
    })

    .state('app.login', {
        url: "/login",
        views: {
            'appContent': {
                templateUrl: "app/views/login.html",
                controller: 'LoginCtrl'
            }
        }
    })

    .state('app.menu', {
        url: "/menu",
        views: {
            'appContent': {
                templateUrl: "app/views/menu.html",
                controller: 'MenuCtrl'
            }
        }
    })

    .state('app.products', {
        url: "/products",
        views: {
            'menuContent': {
                templateUrl: "app/views/products.html",
                controller: 'ProductsCtrl'
            }
        }
    })

    .state('app.productdetail', {
        url: "/projects/:productid",
        views: {
            'menuContent': {
                templateUrl: "app/views/productdetail.html",
                controller: 'ProductDetailCtrl'
            }
        }
    });

In the AppCtrl I'am navigating to Login or Menu.

It navigates to menu.html succefully,

After that when I select the products or orders it is not further navigating.

I noticed the menuContent navigation view is hosted inside the appContent navigation view.

Is ionic supports this kind of hierarchical navigation?

Please find the codepen here code

Answer 1

When using these kind of hierarchical views, we need to specify under which state the view needs to be rendered. Changing the below line of code in your example, will load the Products page properly.

 .state('app.products', {
    url: "/products",
    views: {
        'menuContent@app.menu': {
            templateUrl: "templates/products.html",
            controller: 'ProductsCtrl'
        }
    }
});

Notice the change in the view name, menuContent@app.menu this would specify the router to render the products view under menu state. Read through more on this in original documentation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views