Question

我尝试在我的应用中制作嵌套视图。这是我尝试的方式，我有父UI视图

<div class="ui-view-container col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-12 col-xs-12" ng-cloak>
                <div ui-view></div>
            </div>

我在我的网络应用上更改了所有状态。例如，这是一个州

.state('distributorItem', {
                url: '/distributorItem',
                templateUrl: 'distributorItem.html',
                controller: 'distributorItem',
                authentication: {roles: ["distributor"]}
            })

在这种状态下，我想制作另一个菜单，用户可以通过ID选择项目和查找信息，下面是我如何通过ID参数并添加子UI视图的示例

<table class="table-hover">
            <thead>
                <tr>
                    <th>Item ID</th>
                </tr>
            </thead>   
            <tbody>
                <tr ng-repeat="(key, value) in itemIdInClientDetail">
                    <td><a ui-sref="client/info/{{value.id}}">{{value.id}}</a></td>
                </tr>   
            </tbody> 
        </table>
       <div class="col-lg-11 col-md-11 col-sm-10 col-xs-12">
        <div ui-view></div>
         </div>

有小孩状态

.state('distributorItem.client/info/:itemID', {
                url: '/client/info/:itemID',
                templateUrl: 'clientItemInfo.html',
                controller: 'clientItemInfo',
                authentication: {roles: ["distributor"]}
            })

这不起作用，因为我在控制台中收到此错误

angular.js：12477错误：无法从州'distributorItem'解析'client / info / 1126'

请帮忙...... thnx

编辑：

我做了像@Maxim Shoustin回答的改变。现在状态改变了，但是在点击项目的儿童导航的时候，父ui-view被完全刷新（儿童导航和ui-view）不仅儿童
现在我的状态看起来像这样

.state('client', {
                url: '/client/info/:itemID',
                templateUrl: 'clientInfo.html',
                controller: 'detailControllerClient as vm',
            })
            .state('client.detail', {
                url: '/detail/:itemID',
                templateUrl: 'itemInfoById.html',
                controller: 'detailControllerClient as vm',
            })

html就在这里。（infoDisplay.html是index.html中的父视图。下面的代码中的ui-view是子视图（client.detail）） infoDisplay.html

<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
            <table class="table-hover">
                <thead>
                    <tr>
                        <th>item ID</th>
                    </tr>
                </thead>   
                <tbody>
                    <tr ng-repeat="(key, value) in clientDetail">
                        <td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>     
                    </tr>   
                </tbody> 
            </table>
        </div>
        <div ui-view></div>

Answer 1

您必须使用此格式

.state('detail', {
   url: '/client/info/{itemID}',

和

ui-sref="detail({itemID: '1126'})"

了解更多信息，请参阅Give URL with ID in Angular UI Router和How to pass parameters using ui-sref in ui-router to controller

Answer 2

试试这个

.state('distributorItem', {
            url: '/distributorItem',
            abstract:true,
            templateUrl: 'distributorItem.html',
            controller: 'distributorItem',
            authentication: {roles: ["distributor"]}
        })
       .state('distributorItem.client', {
            url: '/client/info/:itemID',
            templateUrl: 'clientItemInfo.html',
            controller: 'clientItemInfo',
            authentication: {roles: ["distributor"]}
        })

ui-router嵌套视图无法解析状态

2 个答案: