javascript - ui-router 嵌套 View 无法解析状态

Question

我尝试在我的应用中创建一个嵌套 View 。这就是我尝试的方式，我有父 UI View

<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-view 的示例

<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 Error: Could not resolve 'client/info/1126' from state 'distributorItem'

请帮忙...谢谢

编辑:

---

我做了一个像@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 中的父 View 。下面代码中的 ui-view 是 subview (client.detail))信息显示.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