子狀態下的嵌套視圖

Question

在我的Ionic應用程序中，我有一個處於子狀態的頁面“ order.html”。 我想讓此頁面加載另外兩個頁面（“ orderheaderdetail.html”和“ orderitemdetail.html”）。 我定義了“ ui-view”來加載另外兩個頁面（例如“ orderheaderdetail”和“ orderitemdetail”）。 我不知道這是否正確。 但似乎不起作用。 頁面“ A”的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”的狀態更改為抽象狀態，因為它必須處於子狀態。 因此，基本上就像一個擁有其他子狀態的子狀態。 知道如何解決嗎？ 謝謝

Answer 1

您可以為要加載的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'
            } 
       }
})

Answer 2

您的子視圖應使用@引用進行定義，如下所示

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

我不確定這應該是orderitemdetail@protected@order還是orderitemdetail@protected.order 。 所以你應該同時嘗試