Menu
Have some troubles with nested states...
I have an application which has a few pages (represented as page templates). So, I really need to use nested states. Reading documentation and examples was useless...
So the code is here.
This is my states configuration:
myApplication.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('state1', {
url: '/state1',
views: {
'content': {
templateUrl: /* path to template */
},
'menu': {
templateUrl: /* path to template */
},
'overlay': {
templateUrl: /* path to template */
}
}
})
.state('layer', {
url: '/layer',
views: {
'content': {
templateUrl: /* path to template */
},
'menu': {
templateUrl: /* path to template */
}
}
})
.state('layer.message', {
url: '/message',
views: {
'overlay': {
templateUrl: /* path to template */
}
}
});
});
And this is my HTML view:
<html>
<body ng-app="myApplication" ng-controller="AppCtrl">
<div id="wrapper">
<!-- Here is some not interesting stuff -->
</div>
<!-- But here is the most exciting things -->
<div id = "overlay" ui-view="overlay"></div>
</body>
</html>
As you can see I have a state 'layer' and a substate 'layer.message' in this substate I just want to load one extra template which is called overlay and wrap it in a div tag, like in 'state1'.
But all my tries are failed. The firebug debugging tool shows me that template was loaded via GET query. But it doesn't appear in HTML model and therefore it doesn't render. In 'state1' everething is ok.
I believe I'm doing something wrong with nasted states... Any suggestions?
291
Your nested layer.message state needs to address the view in the higher state explicitly using an '@' suffix, ie.:
.state('layer.message', {
url: '/message',
views: {
'overlay@': {
templateUrl: /* path to template */
}
}
})
This says 'use the template to populate the view called "overlay" in the unnamed (root) state'. You could also be more explicit and specify overlay@layer.
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names for more details.
82
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
