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

有一个有效的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

查看：

• View Names - Relative vs. Absolute Names

引用：

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