Angular ui-router 嵌套视图

Question

我试图使用 ui-router 将嵌套视图注入到我的普通视图中。我知道通过执行 ng-include 是可能的。但我想通过使用 ui-router 来解决它。

我的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

有一个工作 笨蛋, ，展示我们如何让它运行

在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中。检查 笨蛋

请参阅：

• 查看名称 - 相对名称与相对名称绝对名称

引用：

...在幕后，每个视图都会被分配一个绝对名称，该名称遵循以下方案 viewname@statename, ，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系人.项目。您还可以选择以绝对语法编写视图名称...