角度ui路由器嵌套视图

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是视图指令中使用的名称，状态名称是该州的绝对名称，例如contact.item。 您还可以选择以绝对语法编写视图名称...