javascript - Angular ui-router 嵌套 View

Question

我正在尝试使用 ui-router 将嵌套 View 注入(inject)到我的普通 View 中。我知道通过执行 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> ，这是我们注入(inject)project.html的地方。然后我们调整状态定义，以注入(inject)嵌套 View - 使用 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注入(inject)到project.html中。检查plunker

参见:

• View Names - Relative vs. Absolute Names

引用:

...Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax...