[英]Angular ui-router nested view
Im trying to inject a nested view into my normal view, using ui-router. 我试图使用ui-router将嵌套视图注入到我的普通视图中。 I know it's possible by doing ng-include. 我知道可以通过执行ng-include来实现。 But I want to solve it by using ui-router. 但是我想通过使用ui-router解决它。
My html is as follow: 我的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'
}
}
})
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. 在index.htm上,我们需要有<div ui-view="" ></div>
,这是我们注入project.html的地方。 Then we adjust the state definition, to inject also nested view - using ui-view
absolute naming: 然后我们调整状态定义,以注入嵌套视图-使用ui-view
绝对命名:
.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. 绝对名称todos@project
,会将todos.html注入project.html中。 Check the plunker 检查拨栓
See the: 请参阅:
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, eg contact.item. ...在幕后,为每个视图分配一个绝对名称,该绝对名称遵循viewname@statename
的方案,其中viewname是视图指令中使用的名称,状态名称是该州的绝对名称,例如contact.item。 You can also choose to write your view names in the absolute syntax... 您还可以选择以绝对语法编写视图名称...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.