Set sidebar content from a nested view



I have a main view with tabs and a left sidebar, which has different nested views. Some of these nested views need to have a control panel which could be ideally defined in a right sidebar. Of course, this sidebar is relative to the nested view itself, which means the content of the sidebar is different for each nested view (and some nested view don’t need this right sidebar at all).

I came to something like that (it has been simplified a lot, to just illustrate the issue) and as you notice, if you click on the right icon, the whole content doesn’t slide, but it just displays the content of the sidebar itself (beside that the ion-content defined in this nested view is somehow “hidden”).

While this might have sense (since we are in a nested view), is there any possibility to set this content dynamically from inside a nested view?


Hi. I am new to ionic but in your situation I would do something like the:

        .state('signin', {
            url: '/sign-in',
            templateUrl: 'templates/sign-in.html'

        .state('menu', {

            templateUrl: 'templates/menu.html',
            controller: 'MenuController',
            abstract: true


        .state('menu.home', {
            url: '/',
            views: {
                'menuContent': {
                    controller: 'HomeController',
                    templateUrl: 'templates/home.html'

Notice that there is an abstract state at the top and all other states will be a child of the abstract state. You can then put all your menu stuff in ‘templates/menu.html’ and have a controller to handle the side menu business logic. This should allow you to generate dynamic side menus.

Hope this helps.


Thank you, I will investigate in this direction. I must probably have a trigger in the “MenuController”, which reacts on a state changement and recalculates the menu accordingly.