删除Ionic/Angular JS中基于侧菜单的模板中的导航栏
Remove navigation bar in sidemenu based template in Ionic/Angular JS
我使用Ionic Framework创建了一个应用程序,它运行得很好。它是基于侧菜单模板的,所以我总是在应用程序的顶部有一个导航栏。
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon-round" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<a menu-close href="#/app/bla">
<div id="profile-item">
<i class="icon ion-card"></i> Bla
</div>
</a>
<a menu-close href="#/app/register">
<div id="profile-item">
<i class="icon ion-card"></i> Sign-up
</div>
</a>
<a menu-close href="#/app/login">
<div id="profile-item">
<i class="icon ion-card"></i> Login
</div>
</a>
</ion-content>
</ion-side-menu>
</ion-side-menus>
app.js:
$stateProvider.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$stateProvider.state('app.start', {
url: '/start',
views: {
'menuContent': {
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
}
}
})
现在对于注册和登录视图,我根本不想显示导航栏。如何在特定视图中删除它?我发现这很难,因为导航栏是在视图之前调用的menu.html中定义的。
我不得不修改app.js:中的路由定义
$stateProvider.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
$stateProvider.state('start', {
url: '/start',
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
})
仅仅删除嘟嘟按钮是不起作用的,因为用户仍然可以在屏幕上向右滑动以显示菜单。
只需隐藏menu-toggle
按钮就可以了。
在rootScope上设置一个变量,根据该变量可以显示/隐藏导航栏切换按钮:
<button ng-if="$root.isShowNav" class="button button-icon button-clear ion-navicon-round" menu-toggle="left">
在应用程序中设置此变量的值。运行:
.run(function($ionicPlatform, $rootScope) {
// $rootScope.isShowNav = true/false based on some condition.
}
例如,在这里你可以做这样的事情:
.run(function($ionicPlatform, $rootScope) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState) {
if (toState.name !== "app.login" || toState.name !== "app.start") {
$rootScope.isShowNav = true;
}
else {
$rootScope.isShowNav = false;
}
}
}
相关文章:
- 设计Django中当前导航菜单项的样式
- 导航菜单-悬停时的背景行为怪异
- 如何在悬停和聚焦时打开引导导航菜单
- jQuery与导航菜单上的mouseover事件冲突.
- iPhone应用程序jquery中的滑块导航菜单
- 导航菜单不适合移动浏览器
- 如何创建具有第三级的垂直导航菜单
- 有没有一种方法可以基于Angular 2中注册的路线构建动态导航/菜单
- 基于 Jquery 的下拉导航菜单
- 波旁威士忌补充导航菜单在单击时向上滑动
- 移动导航菜单不起作用(HTML,CSS和JQuery)
- 定义痕迹导航菜单的变量
- 导航菜单在手机上不起作用
- 单击“下一个”和“上一个”时,如何从导航菜单中添加和删除类
- 可折叠侧边栏/导航菜单
- 如何修复导航菜单
- 实现幻灯片放映后,导航菜单无法工作
- 选择菜单后自动关闭切换导航菜单
- BackboneJS-导航菜单
- 在导航菜单中添加类