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”的状态更改为abstract，因为它必须处于子状态。所以基本上它就像一个有其他孩子状态的孩子。不知道怎么解决这个问题？感谢

Answer 1

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

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

子状态中的嵌套视图

2 个答案: