我有这个 Ionic 应用程序,它已经有很多页面。 现在,要求说我需要添加一个页面,它们将像这样“滑入”:
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>
如您所见,页脚中的每个元素在单击时都会打开一个新页面。 但是最左边的图标必须以“滑动”方式打开页面。 所以我想我必须使用 ionic 侧菜单。对吗?
在那种情况下,我真的不明白如何实现它。 我创建了这样一条新路线:
.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!
最佳答案
<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
关于html - 将侧边菜单添加到现有的 ionic 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39675894/