Nested View in child state

Question

In my Ionic app, I have a page "order.html" in child state. I'd like to have this page to load two other pages ("orderheaderdetail.html" and "orderitemdetail.html"). I defined "ui-view" to load the two other pages (e.g. "orderheaderdetail" and "orderitemdetail"). I don't know if this is the correct practice. But it seems it does not work. The html of page "A" is as follow :

 <ion-view title="Order">
    <div ng-controller="OrderDetailController">
        <ion-content>
            <div layout="row">
                <div class="panel" flex="70" flex="100" flex-sm="70">
                    <div class="panel" flex="90">
                        <div ui-view="orderheaderdetail">
                        </div>
                        <div ui-view="orderitemdetail">
                        </div>
                    </div>
                </div>
            </div>
        </ion-content>
    </div>
</ion-view>

While the routing code is as follow:

 .state('protected.order', {
            url: '/order/:_id/',
            views : {
                'menuContent' : {
                        templateUrl: 'templates/order.html',
                        controller: 'OrderDetailController'
                },

                'orderheaderdetail' : {
                        templateUrl: 'templates/orderheaderdetail.html',
                        controller: 'OrderDetailController'
                },
                'orderitemdetail' : {
                        templateUrl: 'templates/orderitemdetail.html',
                        controller: 'OrderDetailController'
                },             
            }
        })

I cannot change the state of "order.html" into abstract since it must be in child state. So basically it's like a child state having other children states. Any idea how to solve this ? Thanks

Answer 1

You can define one more state for the ui-views to be loaded. YOu should route to that view using $state.go('protected.order.detail').

.state('protected.order', {
        url: '/order/:_id',
        views : {
            'menuContent' : {
                    templateUrl: 'templates/order.html',
                    controller: 'OrderDetailController'
            }            
        }
    })
.state('protected.order.detail', {
       url: '/detail',
       views: {
            'orderheaderdetail' : {
                    templateUrl: 'templates/orderheaderdetail.html',
                    controller: 'OrderDetailController'
            },
            'orderitemdetail' : {
                    templateUrl: 'templates/orderitemdetail.html',
                    controller: 'OrderDetailController'
            } 
       }
})

Answer 2

Your child views should be defined with the @ reference like so

            '[email protected]' : {
                    templateUrl: 'templates/orderheaderdetail.html',
                    controller: 'OrderDetailController'
            },
            '[email protected]' : {
                    templateUrl: 'templates/orderitemdetail.html',
                    controller: 'OrderDetailController'
            },    

I'm not sure if it should be orderitemdetail@protected@order or [email protected] though. So you should try out both