角UI-路由器嵌套视图(Angular ui-router nested view)

我试着去注入嵌套视图进入我的普通视图，使用的UI路由器。 我知道这是做可能NG-包括。 但我想通过UI路由器来解决它。

我的HTML是如下：

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

然后在我的剧本我的状态：

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

更新-是不是有这样的可能吗？

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

任何人都可以找到一个错字或东西吗？ 我读过的文档。 我不知道什么是错的。

提前致谢！

Answer 1:

有一个工作plunker ，展示我们如何能够让它运行

上的index.htm我们需要有<div ui-view="" ></div>这是地方是我们注入project.html。 然后，我们调整状态定义，注入还嵌套视图-使用ui-view绝对命名：

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

绝对名称todos@project ，将注入todos.html到project.html。 检查plunker

见：

• 视图名称-相对与绝对名称

一个举：

......在幕后，每个视图被分配遵循的方案绝对名viewname@statename ，viewname表示视图中的指令所使用的名称和国家名称是国家的绝对名称，例如contact.item。 您也可以选择在绝对的语法来写你的视图名称...

文章来源: Angular ui-router nested view