nadinugraha nadinugraha - 2 months ago 9
AngularJS Question

Nested View in child state

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

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'
            } 
       }
})