CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
jensengar
jensengar

Reputation: 6167

Leave main ui-view the same

I figure there's got to be a way to do this, but I wasn't able to figure it out. I'm trying to add a sidebar view to my application and thought it would be really slick if I could do the sidebar as a ui-view. The problem I'm having though is I don't want to specify every possible sidebar view for every single page. I'd like to be able to just set the view in the sidebar and leave the current/main view the same.

This Fiddle demonstrates my problem.

Upvotes: 2

Views: 62

Answers (1)

Torsten Scholz
Torsten Scholz

Reputation: 866

We solved this problem by introducing a new abstract base state site, which contains two named views content (main area) and sidebar. In the content area we exchange the template depending on which state we are in. The sidebar is not affected by changing the content states.

$stateProvider
    .state('site', {
        url: '/',
        abstract: true,
        views: {
            content: {
                template: ''
            },
            sidebar: {
                template: '<div>this is the sidebar but I also want to see page1 or page2</div>'
            }
        }
    })
    .state('page1', {
        parent: 'site',
        url: '1',
        views: {
            'content@': {
                template: '<div>This is page 1</div>'
            }
        }
    })
    .state('page2', {
        parent: 'site',
        url: '2',
        views: {
            'content@': {
                template: '<div>This is page 2</div>'
            }
        }
    });
}]);

See the Fiddle for a demonstration.

If you want to use multiple independent views, you should have a look at ui-router-extras as ui-router does not support parallel states, but just a state tree. This blog entry discusses the problem and provides a Plunker.

Upvotes: 5

Related Questions