如何在Ons-sliding-menu中为不同的页面调用不同的菜单？

Question

我刚刚检查了这个问题

但是新菜单与旧菜单存在"overrides"的问题。如下图所示。

我已经为不同的页面实现了不同的菜单，为每个页面命名了不同的名称，但我无法删除旧的。我应该使用什么功能来清除和重新初始化相同的菜单？例如如何使用 ons-destroy 来解决这个问题或还有其他解决方案吗？

初始化特定菜单的代码，在本例中 "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>

调用主页的特定菜单的代码，在这种情况下我可以在其中选择不同的菜单"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>

所有调用不同菜单的页面所在的代码。

<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>

Answer 1

如果您只想更改菜单，那么 setMenuPage 就足够了。在您的情况下，我们可以看到 2 个菜单，那么我猜您不是在替换菜单，而是在嵌套它们。为了确保您没有嵌套它们，您需要小心不要做类似 menu.setMainPage(pageX) 的事情，其中 pageX 有自己的菜单。

目前情况似乎是这样 - 你正在做 menu_usato.setMainPage('home.html')，因为它有一个导航器，所以稍后会在里面放入更多页面 - 我猜他们中的大多数都有自己的菜单。但是，与其嵌套菜单然后尝试删除外部菜单，不如尝试找到更简单的解决方案。

您可以采取的三种方法是：

仅使用导航器进行导航 - 基本上，如果您的所有页面都有菜单并且您使用导航器，那么您是安全的。对我来说，似乎在所有情况下你都希望 menu_something 和 home_something 一起使用。因此，仅使用 index_something 页面仅通过 gallery 进行所有导航。
不要使用导航器 - 仅使用 setMainPage 和 setMenuPage。与前一个完全相反。你可以在 index.html 中有一个滑动菜单而不是导航器（假设它再次被称为 gallery） - 内容最初可以是列表，当你点击时你可以做类似的事情 ng-click="setPage('something')"，并定义
```
$scope.setPage = function (category) {
  gallery.setMenuPage('menu_' + category + '.html');
  gallery.setMainPage('home_' + category + '.html');
};
```
如果您不喜欢任何一个选项，那么您应该尽量限制自己不要将带有菜单的页面相互嵌套。

一个简单的方法就是让导航器在外面，带有滑动菜单的页面在里面。基本上一切都可以保持与当前相同，唯一的区别是 menu_something.
中菜单项的 ng-click
只需将其更改为以下任何一项即可
- gallery.pushPage('home.html')
- gallery.replacePage('home.html')
- gallery.resetToPage('home.html')
看你想要达到的效果。

如何在Ons-sliding-menu中为不同的页面调用不同的菜单？

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

html

menu

angularjs

cordova

onsen-ui