Вложенный вид в дочернем состоянии

В моем приложении Ionic у меня есть страница "order.html" в дочернем состоянии. Я хотел бы, чтобы эта страница загружала две другие страницы ("orderheaderdetail.html" и "orderitemdetail.html"). Я определил "ui-view" для загрузки двух других страниц (например, "orderheaderdetail" и "orderitemdetail"). Я не знаю, правильная ли это практика. Но, похоже, это не работает. HTML-код страницы "А" выглядит следующим образом:

 <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>

Пока код маршрутизации выглядит следующим образом:

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

Я не могу изменить состояние "order.html" на абстрактное, так как оно должно быть в дочернем состоянии. Так что в основном это похоже на детское состояние, имеющее другие дочерние состояния. Есть идеи, как это решить? Спасибо

Источник

2 ответа

Решение

Вы можете определить еще одно состояние для загружаемых ui-представлений. Вы должны направить к этому виду, используя $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'
            } 
       }
})
Источник

Ваши взгляды ребенка должны быть определены с @ ссылка вроде так

            'orderheaderdetail@protected.order' : {
                    templateUrl: 'templates/orderheaderdetail.html',
                    controller: 'OrderDetailController'
            },
            'orderitemdetail@protected.order' : {
                    templateUrl: 'templates/orderitemdetail.html',
                    controller: 'OrderDetailController'
            },

Я не уверен, если это должно быть orderitemdetail@protected@order или же orderitemdetail@protected.order хоть. Таким образом, вы должны попробовать оба

Источник
Другие вопросы по тегам