implement differens sliding menu on different pages onsen-ui

Question

I'm trying to load a different sliding menu for each different page onsen-ui, but I have not found how to do it, now I have the following:

//Initializing sliding-menu
<ons-sliding-menu 
    menu-page="menuCalendario.html" 
    main-page="calendarioGeneral.html" 
    side="left" var="menu" 
    type="reveal" 
    max-slide-distance="260px" 
    swipeable="true"
    id="ons_sliding_menu"
>
</ons-sliding-menu>


//menu 1
<ons-template id="menuCalendario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">
                <ons-icon icon="circle"></ons-icon>
                Vista General
            </ons-list-item>
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioDetallado.html', {closeMenu: true})">
                <ons-icon icon="ion-funnel"></ons-icon>
                Vista detallada
            </ons-list-item>
        </ons-list>

        <ul class="list-group">
            <li class="list-group-item" onclick="popupPrendaCalendario()">
                <img src="http://www.mafepe.com/admin/resources/productos/fotos/211/Camisa-Prendas-Atemporales-Aneto-CAMCP.jpg" class="img-prenda-list">
                <div>
                    Camisa verde de cuadros Big jhon                
                </div>
            </li>
        </ul>

    </ons-page>
</ons-template>


//menu 2
<ons-template id="menuPerfilUsuario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-plus"></ons-icon>
                Editar perfil
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>



//page 1
<ons-template id="calendarioGeneral.html">
    <ons-page id="foobar_calendarioGeneral">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Calendario general !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('usuarioPerfil.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>


//page 2
<ons-template id="usuarioPerfil.html">
    <ons-page id="foobar_usuarioPerfil">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Usuario perfil !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>

I need that when calendarioGeneral.html (page 1) is open the menuCalendario.html (Menu 1) is loaded, and when usuarioPerfil.html (page 2) is open the menuPerfilUsuario.html (Menu 2) is loaded

Thank you for any help.

Answer 1

Use menu.setMenuPage(pageUrl, [options]) for that when you change to a different page. Explained in the docs: http://onsen.io/reference/ons-sliding-menu.html#method-setMenuPage