Question

我有这个离子应用程序已经有很多页面。现在，要求说我需要添加一个页面，它将像这样“滑入”：

http://ionicframework.com/docs/api/directive/ionSideMenus/

该应用已经有这样的页脚：

<ion-footer-bar align-title="left" class="bar-assertive">
<div class="row">
    <div class="col text-center">
        <i class = "icon ion-navicon-round" ng-click="go_to('settings')"></i>
    </div>
    <div class="col text-center">
        <i class = "icon ion-person-stalker" ng-click="go_to('social')"></i>
    </div>
    <div class="col text-center">
        <i class = "icon ion-map" ng-click="go_to('home')"></i>
    </div>

如您所见，页脚中的每个元素都会在单击时打开一个新页面。但最左边的图标必须以“幻灯片”的方式打开页面。所以我想我必须使用离子侧菜单。这是对的吗？

在这种情况下，我真的不明白如何实现这一点。我创建了一条这样的新路线：

.state('test', {
url: "/test",
controller: 'TestCtrl',
abstract: true,
templateUrl: "views/test.html"
})

然后在test.html中我放了：

<ion-view>
<ion-side-menus>
    <!-- Left menu -->
    <ion-side-menu side="left">
        ion-side-menu
    </ion-side-menu>

    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content>

    <!-- Right menu -->
    <ion-side-menu side="right">
        right
    </ion-side-menu>

</ion-side-menus>
</ion-view>

这一切都正确吗？以及如何触发菜单页面？一个叫做测试？我尝试更改其中一个页脚元素并添加：

<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

但是当我点击按钮时没有任何反应。只有一条错误消息说：

Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!

Answer 1

<ion-side-menus>
<ion-side-menu-content>
  <ion-nav-bar class="bar-dark nav-title-slide-ios7">
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
     </ion-nav-buttons>
     <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
     </ion-nav-buttons>
  </ion-nav-bar>
  <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
   ion-side-menu
</ion-side-menu>
<ion-side-menu side="right">
  right
</ion-side-menu>

在test.html中尝试这个:)希望它会帮助你（y）如果检查出来 https://forum.ionicframework.com/t/controller-ionnavbar-required-by-directive-ionnavbackbutton-cant-be-found-after-updating-to-beta-14/14925

添加侧面菜单到现有离子应用程序

1 个答案: