Angular ui-router 嵌套视图 [英] Angular ui-router nested view

问题描述

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

我的html如下:

<div class="col-md-12"><div class="panel panel-default"><div class="panel-heading">项目待办事项</div><div class="panel-body"><div ui-view="todos"></div>

然后在我的脚本中我得到了一个状态:

.state('项目', {url: '/project/:projectId',templateUrl: 'views/project/project.html',控制器:'ProjectCtrl'，意见:{'待办事项':{templateUrl: 'views/project/todos.html'}}})

更新 - 难道没有这样的可能吗?

.state('项目', {url: '/project/:projectId',templateUrl: 'views/project/project.html',控制器:'ProjectCtrl'，意见:{'todos@project':{templateUrl: 'views/project/todos.html'}}})

有人能找出错别字之类的吗?我已经阅读了文档.我不确定出了什么问题.

提前致谢！

解决方案

有一个有效的 plunker，展示我们如何让它运行

在 index.htm 上，我们需要有

，这是我们注入 project.html 的地方.然后我们调整状态定义，注入嵌套视图 - 使用 ui-view 绝对命名:

 .state('项目', {url: '/project/:projectId',意见:{'' : {templateUrl: 'views.project.project.html',控制器:'ProjectCtrl'，},'todos@project':{templateUrl: 'views.project.todos.html'}}});

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

见:

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

引用:

<块引用>

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

Im trying to inject a nested view into my normal view, using ui-router. I know it's possible by doing ng-include. But I want to solve it by using ui-router.

My html is as follow:

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

Then in my script I got a state:

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

Update - isn't there something like this possible?

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

Anyone can find a typo or something? I've read the docs. I am not sure what's wrong.

Thanks in advance!

解决方案

There is a working plunker, showing how we can make it running

On the index.htm we need to have the <div ui-view="" ></div>, which is the place were we inject the project.html. Then we adjust the state definition, to inject also nested view - using ui-view absolute naming:

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

The absolute name todos@project, will inject the todos.html into the project.html. Check the plunker

See the:

• View Names - Relative vs. Absolute Names

A cite:

...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...

这篇关于Angular ui-router 嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！