How to call different menu for different pages in Ons-sliding-menu?

I just checked this question implement differens sliding menu on different pages onsen-ui

but there are problems of "overrides" of the new menu with the old one. As you can see in the figure below.

I have already implemented different menu for different pages, giving a different name for each, but i cant delete the old one. What function should I use to clear and re-initialize the same menu? For example how to use ons-destroy for this problem or There are other solutions?

code where initialize a specific menu, in this case "index_menu.html":

<ons-sliding-menu menu-page="menu_usato.html" main-page="home_usato.html" side="left"
    var="menu_usato" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
</ons-sliding-menu>

code of a specific menu that calls the main page where i can choose different menu in this case "menu_usato.html":

<ons-list-item class="menu-item" modifier="chevron" ng-click="menu_usato.setMainPage('home.html', {closeMenu: true})">
    <ons-icon icon="fa-home" fixed-width="true"></ons-icon>
    Home
</ons-list-item>

code where there are all the pages where that call different menu.

<ons-navigator animation="slide" var="gallery">
    <ons-page>
        <div class="app-page">
            <div class="app-page-menu">
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_land.html');">
                            <img src="images/menu/antipasti.jpg">
                            <p>Land Rover</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_hyundai.html');">
                            <img src="images/menu/primi.jpg">
                            <p>Hyundai</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_mitsubishi.html');">
                            <img src="images/menu/pastefresche.jpg">
                            <p>Mitsubishi</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_ssangyong.html');">
                            <img src="images/menu/secondi.jpg">
                            <p>SsangYong</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_isutzu.html');">
                            <img src="images/menu/insalatamista.jpg">
                            <p>Isutzu</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_greatwall.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>GreatWall</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_usato.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>Usato</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
            </div>

        </div>

    </ons-page>
</ons-navigator>

Solution

If you just want to change the menus then setMenuPage should be enough. In your case we can see 2 menus then I guess you're not replacing the menus, but nesting them. In order to ensure that you aren't nesting them you need to be careful not to do something like menu.setMainPage(pageX) where pageX has a menu of its own.

Currently that seems to be the case - you're doing menu_usato.setMainPage('home.html'), which will later put more pages inside since it has a navigator - and I guess most of them have their own menus. However instead of nesting menus and then trying to remove the outer ones you should try to find a simpler solution.

The three approaches which you could take are:

Use only the navigator for navigation - basically if all of your pages have a menu and you use the navigator you are safe. To me it seems like in all cases you want to have menu_something together with home_something. So just do all navigation only through gallery using only the index_something pages.
Don't use the navigator - only setMainPage and setMenuPage. The total opposite of the previous one. Instead of a navigator you can have one sliding menu in index.html (lets say it's called gallery again) - the content can initially be the list and when you click you could do something like ng-click="setPage('something')", and define
```
$scope.setPage = function (category) {
  gallery.setMenuPage('menu_' + category + '.html');
  gallery.setMainPage('home_' + category + '.html');
};
```
If you don't like either option then you should just try to limit yourself not to nest pages with menus into one another.

An easy way to do that is just have your navigator be on the outside and the pages with sliding menus on the inside. Basically everything can remain the same as it currently with the only difference being the ng-click of the menu items in menu_something.

Just change the it to any of the following
- gallery.pushPage('home.html')
- gallery.replacePage('home.html')
- gallery.resetToPage('home.html')
depending on the effect, which you want to achieve.