角UI路由器嵌套视图 [英] Angular ui-router nested view

问题描述

我试着注入嵌套视图进入我的普通视图，使用UI的路由器。
我知道这是做可能NG-包括。但我想用UI路由器来解决它。

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.

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

然后在我的剧本我有一个状态：

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'
      }
   }
})

更新 - 是不是有这样的可能

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

在此先感谢！

推荐答案

有一个工作的 plunker ，展示我们如何能够让它运行

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

在的index.htm，我们需要有＆LT;格UI视图=＆GT;＆LT; / DIV＆GT; ，这是被我们注入的地方该project.html。然后，我们调整状态定义，注入还嵌套观 - 用用户界面视图绝对命名：

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'
      }
    }
  });

绝对名称待办事项@项目，将注入todos.html到project.html。检查 plunker

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

查看：

• 视图名称 - 相对与绝对名称

• View Names - Relative vs. Absolute Names

一个引用：

...在幕后，每一个观点被分配遵循视图名@ Statename的的方案，其中视图名称在视图指令所使用的名称和绝对名称国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称...

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

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