子状态下的嵌套视图

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。所以你应该尝试两者

子状态下的嵌套视图

Nested View in child state

angularjs

nested-views

ionic-framework

angular2-routing