Nested views not rendered

Question

Very basic example, but doesn't work. What i do wrong?

<body ng-app="App"></body>

<div ui-view="navbar"></div>
<div ui-view="sidebar"></div>
<div ui-view="content"></div>

<script>

    var App = angular.module('App', ['ui.router']);

    App.config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/users');

        $stateProvider
            .state('users', {
                url: '/users',
                views: {
                    'navbar':  {template: '<p>Navigation</p>'},
                    'sidebar': {template: '<a href="#users/123">Link</a>'}
                }
            })
            .state('users.item', {
                url: '/:id',
                views: {
                    'content': {template: 'User info'}
                }
            });

    });

</script>

When click on link - app become 'users.item' state, but views.content will be not rendered

can u add a fiddle to show it not working?

Anton
– Anton

2013-10-08 00:12:36 +00:00
Commented Oct 8, 2013 at 0:12 — Anton
– Anton, Commented Oct 8, 2013 at 0:12
from ui router docs plnkr.co/edit/SDOcGS?p=preview

Anton
– Anton

2013-10-08 00:13:15 +00:00
Commented Oct 8, 2013 at 0:13 — Anton
– Anton, Commented Oct 8, 2013 at 0:13

peterorum · Accepted Answer · 2013-10-08 01:56:06Z

1

You need to nest the content view in the template:

'sidebar': { template: '<a href="#users/123">Link</a><div ui-view="content"></div>' }

rather than having it in the body.

answered Oct 8, 2013 at 1:56

peterorum

1,4412 gold badges16 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Nested views not rendered

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related