带点符号的嵌套视图

Question

谁能帮我解决 angular js 中的嵌套视图。我用这个点符号

  $stateProvider
  .state('contacts/:id', {
  templateUrl: 'contacts.html',
  controller: function($scope){
  $scope.contacts = [{ name: 'Alice' },       { name: 'Bob' }];
   }
   })
  .state('contacts/:id.list/:id', {
   templateUrl: 'contacts.list.html'
   });

  function MainCtrl($state){
     $state.transitionTo('contacts/:id.list/:id'       );
  }

在html中我也这样调用状态改变

<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>

但我总是得到

angular.js:12477 Error: Could not resolve 'contact/2.list/2' from state 'contact/:id'

谢谢

编辑：

我做了一个像@Maxim Shustin 回答的那样的改变。现在状态改变了，但是在子导航中，当我点击项目时，父 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

<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>

您不能将 id.list 与 id 一起使用，因为 Angular 确定模式中的重复名称 id。但是 id_list 没问题。例如

参见 ui-sref 文档

状态是：

.state('contacts', {
    url: '/contacts/:id_list/:id',  
    templateUrl: 'contacts.html'
  })

和HTML：

<a ui-sref="contacts({'id_list': value.id, 'id': value.id})" >contacts</a>

Demo Plunker

带点符号的嵌套视图

Nested views with dot notation

angularjs

angular-ui-router