向现有离子应用程序添加侧边菜单

问题描述：

我有这个已经有很多页面的离子应用程序。现在，要求说我需要添加一个页面theat会像这样的“幻灯片”：向现有离子应用程序添加侧边菜单

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>

这是正确的？以及如何触发菜单页面？那个叫做测试？我tryed改变页脚元素之一，补充一点：

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

答

<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

向现有离子应用程序添加侧边菜单

相关推荐