0

在我的 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”的状态更改为抽象，因为它必须处于子状态。所以基本上它就像一个有其他子状态的子状态。知道如何解决这个问题吗？谢谢

4

2 回答 2

0

您可以为要加载的 ui-views 再定义一种状态。您应该使用 . 路由到该视图$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'
            } 
       }
})
于 2016-10-01T06:38:05.993 回答
0

您的子视图应该@像这样使用参考定义

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

我不确定它是否应该orderitemdetail@protected@order是orderitemdetail@protected.order。所以你应该尝试两者

于 2016-10-01T06:39:19.593 回答