Having troubles with nested states in AngularJS and ui-router

Question

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?

what is the url in that case. It should be /layer/message? — Chandermani
– Chandermani, Commented Oct 25, 2013 at 8:53

mjtko · Accepted Answer · 2013-10-25 09:47:18Z

14

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.

edited Oct 25, 2013 at 9:47

answered Oct 25, 2013 at 9:13

mjtko

1,0409 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Dryndik Over a year ago

Thanks, now it works. One symbol '@' did everything I need. )

mjtko Over a year ago

No problem, glad you got it working! I've edited my answer to provide a reference to the docs where this is outlined too.

Collectives™ on Stack Overflow

Having troubles with nested states in AngularJS and ui-router

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related