AngularJS nested views

Question

Hi there I don't know how to show for example navbar and real content from route. My stateProvider looks like this:

    .state('panel', {
        abstract: true,
        views: {
            // the child views will be defined here (absolutely named)
            'navbar': { templateUrl: 'packages/admin/app/partials/panel/navbar.html' }
        }
    })
    .state('panel.dashboard', {
        url: '/dashboard',
        templateUrl: 'packages/admin/app/partials/panel/index.html',
        controller: 'AdminCtrl'
    });

My main HTML file looks like this:

<body>
   <div ui-view="navbar"></div>
    <div class="container">
     <div ui-view></div>
   </div> <!-- /container -->

</body>

And after going to route /dashboard I see only navbar.html content generated in *ui-view="navbar" but I don't see index.html' from main ui-view. How to manage this ?

jdmcnair · Accepted Answer · 2014-04-06 22:27:52Z

1

I'm not sure why you're trying to use multiple views when it seems like this is a better usage case for plain nested views. I'd try to model your code instead after the nested views example: https://github.com/angular-ui/ui-router#nested-states--views

answered Apr 6, 2014 at 22:27

jdmcnair

1,31515 silver badges33 bronze badges

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

Comments

João Paulo Motta · Accepted Answer · 2014-08-25 13:46:51Z

I suggest you instead of you using ui-view to load the navbar to use ngInclude.

That way you can have the html for your navbar and still use ui-view to load the other partials.

Your main HTML code would look like this:

<body>
   <div ng-include="packages/admin/app/partials/panel/navbar.html"></div>
    <div class="container">
     <div ui-view></div>
   </div> <!-- /container -->

</body>

You would have to remove:

/* Take me out!
    .state('panel', {
            abstract: true,
            views: {
                // the child views will be defined here (absolutely named)
                'navbar': { templateUrl: 'packages/admin/app/partials/panel/navbar.html' }
            }
        })
*/

From your code.

You could still set the url for the navbar dynamically inside a controller.

Collectives™ on Stack Overflow

AngularJS nested views

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related