Menu
If I have index.html with:
<body>
<ui-view="home"></home>
</body>
Then inside that home view i render frame.html with the following inside:
<div ui-view="home_content"></div>
In my app.js I've been trying to get the most inner the ui-view inside frame.html to render another html template. I'm able to render the content in the home view just fine but nothing renders inside home_content.
My app.js ui-router code
$stateProvider
.state('user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
.state('user.home', {
url: '/home',
views: {
'home@': {
templateUrl: 'app/partials/home/frame.html',
controller: 'homeCtrl'
},
'home_content@home': {
templateUrl: 'app/partials/home/dashboard/index.html',
controller: 'dashboardCtrl'
}
}
});
Seems like I may be coming at this all wrong, not sure if the above is the right way to go about it.
636
There is a working plunker
I would expect, that you want to target unnamed view of your parent in the child, so the view should be defined like this:
$stateProvider
// here we define parent
.state('user', {
abstract: true,
// parent has UNNAMED view
template: '<ui-view/>', // this will be injected into index.html
... // ui-view=""
})
// child will partilly target parent
// and also itself
.state('user.home', {
url: '/home',
views: {
// here we target parent UNNAMED view
'': {
...
},
// here we target current state
// so we should use state name
'[email protected]': {
...
}
}
});
What would also work is instead of '' : { } we can use '@home' : {} (see the doc below).
In case (as mentioned below in the comment) we have index.html with target named home:
<div ui-view="home"></div>
We can use this plunker, which redefines the parent abstract state like this:
$stateProvider
.state('user', {
abstract: true,
data: {
...
},
views : {
'home' : {
template: '<div ui-view=""></div>',
}
}
})
Check the doc
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.For example, the previous example could also be written as:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
