Angular UI-路由器中的嵌套状态向下 2 层?
Nested states 2 levels down in Angular UI-Router?
我知道如何使用 UI-Router 来添加路由和子路由,例如在我的站点上我有一系列邮件服务:,如 http://localhost:3001/#/partners/usps
中"usps" 是合作伙伴。这是使用:
.state('partners.usps', {
url: '/usps',
templateUrl: 'modules/partners/templates/partner.usps.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
我现在想做的是为该合作伙伴 USPS 的不同部分设置低于此级别的 URL,例如 http://localhost:3001/#/partners/usps/labels
,但我找不到这方面的信息。
这不有效:
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
这个 syntax/method 是什么?
不确定,哪个部分没有按预期工作 - 所以我 created working plunker。
状态不变:
.state('partners', {
url: '/partners',
template: '<div ui-view=""></div>',
})
.state('partners.usps', {
url: '/usps',
templateUrl: 'modules/partners/templates/partner.usps.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
对于一个状态 'partners.usps'
,我使用一个模板作为 child 的目标:
这是 templateUrl:'modules/partners/templates/partner.usps.html', - 检查其根元素上的属性
<div ui-view>
<h3>current state name: <b> partners.usps</b></h3>
<h5>params</h5>
<pre>{{$stateParams | json}}</pre>
<h5>state</h5>
<pre>{{$state.current | json}}</pre>
</div>
因此,child 将完全替换此内容
检查一下here
注意:我们可以只扩展 parent,而不是替换,例如
<div>
<h3>current state name: <b> partners.usps</b></h3>
<div ui-view=""></div>
延长:
不确定真正的要求是什么,但我扩展了 plunker。
假设我们需要能够导航到如下链接:
<a href="#/partners/usps">
<a href="#/partners/usps/indicia">
<a href="#/partners/usps/label">
<a href="#/partners/usps/any">
<a href="#/partners/usps/other">
这样就可以了
// this is a special state INDICIA
// if needed, it could do some special stuff
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
// this will handle any other params, passed
// as a child
.state('partners.usps.child', {
url: '/:paramName',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
检查一下here
最后,我创建了一个带有扩展版本的内联插件,可以在这里访问:
http://run.plnkr.co/plunks/b5nGpGKcGtQNuIbIgxPD#/partners/usps/other111
我们可以测试任何参数都可以在 url 中传递:#/partners/usps/what-ever-we-want
我知道如何使用 UI-Router 来添加路由和子路由,例如在我的站点上我有一系列邮件服务:,如 http://localhost:3001/#/partners/usps
中"usps" 是合作伙伴。这是使用:
.state('partners.usps', {
url: '/usps',
templateUrl: 'modules/partners/templates/partner.usps.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
我现在想做的是为该合作伙伴 USPS 的不同部分设置低于此级别的 URL,例如 http://localhost:3001/#/partners/usps/labels
,但我找不到这方面的信息。
这不有效:
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
这个 syntax/method 是什么?
不确定,哪个部分没有按预期工作 - 所以我 created working plunker。
状态不变:
.state('partners', {
url: '/partners',
template: '<div ui-view=""></div>',
})
.state('partners.usps', {
url: '/usps',
templateUrl: 'modules/partners/templates/partner.usps.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
对于一个状态 'partners.usps'
,我使用一个模板作为 child 的目标:
这是 templateUrl:'modules/partners/templates/partner.usps.html', - 检查其根元素上的属性
<div ui-view>
<h3>current state name: <b> partners.usps</b></h3>
<h5>params</h5>
<pre>{{$stateParams | json}}</pre>
<h5>state</h5>
<pre>{{$state.current | json}}</pre>
</div>
因此,child 将完全替换此内容
检查一下here
注意:我们可以只扩展 parent,而不是替换,例如
<div>
<h3>current state name: <b> partners.usps</b></h3>
<div ui-view=""></div>
延长:
不确定真正的要求是什么,但我扩展了 plunker。
假设我们需要能够导航到如下链接:
<a href="#/partners/usps">
<a href="#/partners/usps/indicia">
<a href="#/partners/usps/label">
<a href="#/partners/usps/any">
<a href="#/partners/usps/other">
这样就可以了
// this is a special state INDICIA
// if needed, it could do some special stuff
.state('partners.usps.indicia', {
url: '/indicia',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
// this will handle any other params, passed
// as a child
.state('partners.usps.child', {
url: '/:paramName',
templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
controller: 'PartnerCarrierCtrl as carrier',
data: {
pageTitle: 'USPS',
access: 'public'
}
})
检查一下here
最后,我创建了一个带有扩展版本的内联插件,可以在这里访问:
http://run.plnkr.co/plunks/b5nGpGKcGtQNuIbIgxPD#/partners/usps/other111
我们可以测试任何参数都可以在 url 中传递:#/partners/usps/what-ever-we-want