[英]navigate to nested named view with ui-router
在應用程序中,我將視圖命名為mainContent 。
<div class = "wrapper"
ui-view = "mainContent">
</div>
這個視圖我只有一條路線。
$stateProvider
.state("home",
{
url: "/home",
views: {
'mainContent': {
templateUrl: "app/home/home.html"
}
}
});
我將home.html加載到命名視圖mainContent視圖,該視圖也命名為view appContent 。
home.html的
<div class = "row"
ui-view = "appContent">
</div>
嵌套的命名視圖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"
}
}
});
當我嘗試加載http://.../#/home/request/create時 ,未創建RequestController ,也未加載視圖createRequest.html。
從視圖導航到request.create狀態:
<a ui-sref = "request.create"><i class = "fa fa-plus"></i>New</a>
謝謝
您的“請求”狀態需要自己的模板和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>"
}
}
});
這適合我。 證明: http : //jsfiddle.net/eD3MU/373/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.