[英]navigate to nested named view with ui-router
In app I have named view mainContent . 在应用程序中,我将视图命名为mainContent 。
<div class = "wrapper"
ui-view = "mainContent">
</div>
I have only one route for this view. 这个视图我只有一条路线。
$stateProvider
.state("home",
{
url: "/home",
views: {
'mainContent': {
templateUrl: "app/home/home.html"
}
}
});
I load home.html to named view mainContent view which has also named view appContent . 我将home.html加载到命名视图mainContent视图,该视图也命名为view appContent 。
home.html home.html的
<div class = "row"
ui-view = "appContent">
</div>
Routes for nested named view appContent are here. 嵌套的命名视图appContent的路由在这里。
$stateProvider
.state("request",
{
parent: "home",
abstract: true,
url: "/request"
})
.state("request.create", {
url: "/create",
views: {
appContent: {
templateUrl: "app/requests/create/createRequest.html",
controller: "RequestController as vm"
}
}
});
When I try load http://.../#/home/request/create RequestController is not created and also view createRequest.html is not loaded. 当我尝试加载http://.../#/home/request/create时 ,未创建RequestController ,也未加载视图createRequest.html。
From view navigate to request.create state with : 从视图导航到request.create状态:
<a ui-sref = "request.create"><i class = "fa fa-plus"></i>New</a>
Thank 谢谢
Your "request" state needs its own template an ui-view where you can open its child view 您的“请求”状态需要自己的模板和ui视图,您可以在其中打开其子视图
$stateProvider
.state("home",
{
url: "/home",
views: {
'mainContent': {
template: "<div class ='row' ui-view ='appContent'></div>"
}
}
})
.state("request",
{
parent: "home",
abstract: true,
url: "/request",
views: {
'appContent': {
template: "<div class ='row' ui-view ='requestContent'></div>"
}
}
})
.state("request.create", {
url: "/create",
views: {
'requestContent': {
template: "<p>Create Request</p>"
}
}
});
This works for me. 这适合我。 Proof: http://jsfiddle.net/eD3MU/373/ 证明: http : //jsfiddle.net/eD3MU/373/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.