Side menu appears only after refresh - angularjs

I want to create a mobile app with Ionic framework (my first one). I've created expense.html and expense-detail.html. The sidemenu appears correctly on the expense.html but on the "child" page it appears only after refresh. Here is my code:
This is my side-menu:
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-header bar-dark">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
<div class="h1 title">My Money Tracker</div>
</ion-header-bar>
<ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>
<ion-content></ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<a menu-close ui-sref="app.expenses" class="item">Expenses</a>
<a menu-close ui-sref="app.incomes" class="item">Incomes</a>
<a menu-close ui-sref="app.categories" class="item">Categories</a>
<a menu-close ui-sref="app.statistics" class="item">Statistics</a>
<a menu-close ui-sref="app.account" class="item">Account</a>
</ion-side-menu>
</ion-side-menus>
These are the states of the application:
.state('app.expenses', {
url:"/expenses",
views: {
"mainContent" : {
templateUrl : "app/expenses/expenses.html"
}
}
})
.state('app.expense-detail', {
url:"/expenses/:id",
views: {
"mainContent" : {
templateUrl : "app/expenses/expense-detail.html"
}
}
})
The sidemenu appears on all of app.* states by default except for app.*-detail in which it appears only after a refresh.
What am I doing wrong?

I solved this problem by reading this http://ionicframework.com/docs/api/directive/menuToggle/ and adding enable-menu-with-back-views="true" to the side menu

Related

how do i display a page with side-menu using $location?

i'm trying to display a page that has a side-menu. i've tried adding enable-menu-with-back-views="true" to my ion-side-menus but it still does not display the page.
here's my code for the side-menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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-bar>
<ion-nav-view name="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header ">
<ion-list id="menu-list1">
<ion-item id="menu-list-item1" ui-sref="menu.mainMenu" menu-close="">Main Menu</ion-item>
<ion-item id="menu-list-item2" ui-sref="menu.seeNearbyCICOs" menu-close="">See Nearby CICOs</ion-item>
<ion-item id="menu-list-item3" ui-sref="menu.termsAndConditions" menu-close="">Terms and Conditions</ion-item>
<ion-item id="menu-list-item4" ui-sref="menu.fAQ" menu-close="">FAQ</ion-item>
<ion-item id="menu-list-item5" ui-sref="menu.contactUs" menu-close="">Contact Us</ion-item>
<ion-item id="menu-list-item6" ui-sref="menu.help" menu-close="">Help</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
and here's my controller.js code:
.controller('loginCtrl', ['$scope', '$stateParams', '$location', function ($scope, $stateParams, $location) {
$scope.userdata = {}
$scope.enterlogin = function(usern,pass)
{
if(usern== "admin" && pass == "bam_1987!")
{
$location.path('/page19');
}
else
{
alert('Please check your credentials.');
}
}
}])
where /page19 is the url of state menu.help, the page i'm trying to display.
I don't know much about $location, but maybe you have to use this :
$location.path("yourpath")
$scope.$apply()
if you get an error relative to $digest when you use this line , try :
$location.path("yourpath")
setTimeout(function(){$scope.$apply()})
Or , you can use states with ui.router , and then use :
$state.go("yourState")
This is what i use to change pages

ionic - unable to print title on navbar

I am working with angular and ionic and i'm currently not able to print ANY title in the navbar.
I have a quite complex setup with multiple nested views.
Here's the list of states:
state('app', {
cache: false,
url: '/app',
abstract: true,
templateUrl: './sections/menu/menu.tpl.html',
controller: 'menuCtrl'
}).state('app.home', {
url: '/home',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'homeCTRL'
},
'Details#app.home': {
templateUrl: './sections/home/home.tpl.html'
},
'List#app.home': {
templateUrl: './sections/List/List.tpl.html'
}
}
}).state('app.details', {
name: 'appDetails',
url: '/:ID',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'DetailsCtrl'
},
'zoneDetails#app.details': {
templateUrl: './sections/Details/Details/details.tpl.html'
},
'zoneList#app.details': {
templateUrl: './sections/List/List.tpl.html'
}
}
});
My main (abstract) state is app and uses menu.tpl.html which looks like this:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content class="custom-central-content">
<ion-nav-bar class="bar-calm custom-header-bar">
<ion-nav-buttons side="left">
<!--<button class="button button-icon button-clear ion-home" menu-toggle="left"></button>-->
<button class="button button-icon button-clear ion-home" ui-sref="app.myHouse" id="AppMenuLeftIcon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right" id="AppMenuRightIcon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-view ui-view="appContent"></ion-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
.....
inside <ion-view ui-view="appContent"></ion-view> I am using the template from pageViewsContainer.tpl.html which is:
<ion-view>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
and then inside both Details and List I am printing the two views I need.
The problem is that I need to be able to set a static title for the main (home) page, but then dynamically change it when I go inside Details with the name of the page from my scope.
The problem is that I am not able to print ANY title (plain text, not scope) in any way.
I tried with (in pageViewsContainer.tpl.html):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
<ion-view view-title="View 1">
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
as well as (inside details template):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="has-footer has-header">
...
<ion-view view-title="View 1">
<ion-content class="has-footer has-header">
...
But nothing worked.
Suggestions?
Try adding the title command inside header-bar
<ion-view>
<ion-header-bar class="bar-stable">
<h1 class="title">View 1</h1>
</ion-header-bar>
<ion-view>
or try
<ion-view>
<div class="bar bar-header browse-header" align-title="center">
<h1 class="title">View 1</h1>
</div>
<ion-content class="has-header">
</ion-content>
</ion-view>
It turned out I had to change quite a bit on my navigation, as I was using the nested views, parent, childs in a completely wrong way. It's working fine now.
Also, if, for some reasons, the title navbar it's still not displayed, you can force it using this in the controller (coffeescript):
# This should show the navabar everytime the view is entered
$scope.$on '$ionicView.enter', () ->
$ionicNavBarDelegate.showBar true

Sharing multiple views and controllers using "ion" view calls in Ionic Project

I've been stuck on this issue for a week now and I feel like I understood 'ui-router' and 'ionic's' view routing but this seems not to be the case.
I've seen numerous examples how the view works but now as my build is larger, the examples I've seen are too simplistic for my project as my project has views for both a side menu, tabs, and each tabs content.
My issue:
I am holding more than one view with different controllers inside of my tabs. I'm working with a leaflet map and a drop down list that will be populated with my locations and I got both to work. However, the views are making weird calls. Anytime I select the leaflet map it pushes my "Discover List" (in my discover-home.html) button under my apps ion-nav-bar in my menu.html. In addition, you can see that this list view is in-between my map and the zoom icons and if do not touch my map and I switch tabs and come back I cannot open the list again.
I think the question's I need to ask to understand my problem are
1. What is the correct way to navigate in a multi-viewed applications using ionic's view navigation?
2. Why does changing views disable other controllers from being called again?
3. What are some of the best practices?
This is what I'm dealing with. Any help would be appreciated.
my tab view inside discover-home.html
Sidebar view inside menu.html
List Display inside discover-home.html
discover list in discover-home.html hidden under ion-nav-bar in menu.html
Here's my code snippets
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
discover-tabs-controller.html
This controls the tabs views (one of which is discover-home.html)
<ion-view>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tabs class="tabs-positive tabs-icon-only" >
<ion-content has-subheader="true"></ion-content>
<!--HOME TAB [OPEN]-->
<ion-tab title="Discover" icon-on="icon ion-home" icon-off="icon ion-home"
href="#/app/discover/home">
<ion-nav-view cache-view="true" name="home-tab"></ion-nav-view>
<!-- View For Home.html -->
</ion-tab>
<!--HOME TAB [CLOSED]-->
<!--MORE TABS HERE-->
</ion-content>
</ion-tabs>
</div>
</ion-view>
Discover-home.html
<ion-view view-title="Home">
<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
<div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
<h2 class="title">{{title}} List</h2>
</div>
<!--DISPLAY OVERLAY WITH LIST-->
<ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">
<ion-content class="has-subheader">
<button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
</button>
<ion-list>
<ion-item ng-repeat="item in items" class="dark-item">
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<!--LEAFLET MAP -->
<leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
</leaflet>
</ion-view>
controller.js
angular.module('starter.controllers', [])
...
// #######| LEAFLET MAP |#######
.controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {
var tileSource = {
onlineTiles: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
};
angular.extend($scope, {
nassau: {
lat: 25.074521,
lng: -77.318191,
zoom: 13
.........
});
}])
// #######| SHOW OVERLAY |#######
.controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
$scope.pushFrost = function() {
var el = angular.element(document.getElementById('myPane'));
el.attr('frost', '');
el = $compile(el)($scope);
$rootScope.showOverlay = true;
};
}])
//#######| DISPLAYS CONTENTS |##########
.controller('OverlayCtrl', function($scope, $rootScope, $compile) {
$scope.items = [];
for(var i = 0; i < 5; i++) {
$scope.items.push({
text: 'Whatever ' + (i+1)
});
}
$scope.hideFrost = function() {
$rootScope.showOverlay = false;
var el = angular.element(document.getElementById('myPane'));
};
})
app.js
config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
name: 'app',
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.discover', {
name: 'app.discover',
url: "/discover",
views: {
'menuContent': {
templateUrl: "templates/discover-tabs-controller.html"
}
}
})
// for my discover-home.html
.state('app.discover.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/discover-tabs/discover-home.html",
controller: 'ActivityCntl'
},
'discover-home-listview': {
templateUrl: "templates/discover-tabs/discover-home.html",
}
}
})
menu
This controls the sidemenu items
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
//IT GETS PUSHED UNDER THIS
<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" 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-header-bar class="bar-stable">
<h1 class="title">MYApps</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
<i class="icon ion-person"></i>
Login
</ion-item>
<ion-item menu-close href="#/app/discover">
<i class="icon ion-location"></i>
Discover
</ion-item>
<ion-item menu-close href="#/app/map">
<i class="icon ion-map"></i>
Map
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

Ionic app with side-menu and two views with tabs don't switch correctly

In my application with a side menu and several pages. One of those pages, (let's call it Page A) has tabs, everything was working OK - side menu changes the screen with different pages, Page A with tabs had it's tabs working.
Things went south when I tried to add another page with tabs (let's call it Page B). If I am on any page and click on Page A, Page A appears, its tabs works ok. If I click on side menu to open Page B, the URL changes, but nothing happens (Page A is still on screen). All other pages load without problems. If I refresh the browser with Page B URL opened, or refresh on any page other than Page A and then click on Page B side menu link, Page B loads OK, and the reverse happens - any page but Page A will load.
If I comment the code to have tabs on either Page A or Page B, everything works again. So it seems that I can't have an app with side menu and two different pages with different tabs. Is that correct?
Here's my code (relevant parts):
index.html:
<body ng-app="kinofit">
<ion-nav-view></ion-nav-view>
</body>
app.js:
angular.module('kinofit', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
.state('app.aerobico', {
url: "/aerobico",
views: {
'menuContent': {
templateUrl: "templates/aerobico.html",
controller: 'AerobicoCtrl'
}
}
})
.state('app.musculacao', {
url: "/musculacao",
views: {
'menuContent': {
templateUrl: "templates/musculacao.html",
controller: 'MusculacaoCtrl'
}
}
});
templates/menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<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-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
<i class="icon ion-home"></i> Início
</ion-item>
<ion-item nav-clear menu-close href="#/app/aerobico">
<i class="icon ion-heart"></i> Aeróbico
</ion-item>
<ion-item nav-clear menu-close href="#/app/musculacao">
<i class="icon ion-checkmark-circled"></i> Musculação
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
templates/musculacao.html:
<ion-view view-title="MUSCULAÇÃO" class="musculacao-view">
<ion-tabs tabs-type="tabs-icon-top" class="tabs-striped">
<ion-tab title="Tab 1">
<ion-content class="tabbed-content-within-sidemenu-app padding">
(...)
</ion-content>
</ion-tab>
<ion-tab title="Tab 2">
<ion-content class="tabbed-content-within-sidemenu-app padding">
(...)
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
and templates/aerobico.html is the same, changing the view-title and class attributes.
I'm aware that codepen or similar websites would be better to post the code, but I couldn't make it work with multiple html files.
Any help would be greatly appreciated. Thanks.
Seems like problem related to caching of views, views Caching is by default enable in ionic framework
You need to Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.(Do add it in config block)
$ionicConfigProvider.views.maxCache(0);
Similar answer here
OP Edit: I couldn't get this to work, but adding cache:false to the $stateProvider call (solution #2 on the "answer here" link above) did the trick for me (OP).

Ionic - How to remove sidemenu on login page only?

I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic ionic start myApp sidemenu to create the project.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
login page
<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>
</ion-content>
</div>
You can disable/enable sidemenu at any time at any page by calling
$ionicSideMenuDelegate.canDragContent(false)
e.g:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false)
});
**Ionic 2**
import { MenuController } from 'ionic-angular';
export class LoginPage {
constructor(public menuCtrl: MenuController) {
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import { MenuController } from '#ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now.
same issue here. just add hide-nav-bar="true" to the ion-view
<ion-view hide-nav-bar="true">
Hope it helps!
What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.
Your login page should look like this:
<ion-view>
<ion-content>
<!--your page content goes in here-->
</ion-content>
</ion-view>
To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.
Your menu.html file:
<ion-view>
<ion-side-menus>
<ion-side-menu>
<!--put your side menu content here-->
<!--any child state of app will inherit this sidemenu-->
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
A little late to the game but this is another option for those (like me) who need to keep their login view within the side-menu layout but need to hide the side menu button while keeping the view title.
Inside the login.html view use the ion-header-bar directive to create a new header with a title and then hide the ion-nav-bar in the side-menu layout via the ion-view tag.
Example (login.html)
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-view hide-nav-bar="true">
<!-- Login content goes here -->
</ion-view>
Then if you need to disable any drag gestures do so in the controller like #waqas suggests.
I have made a small demo for the question.
Plunker Demo
If you want a page differently from sidemenu.Create a new Parent state.
For example
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
Html :
<ion-view class="view-bg-blue" >
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Then call this state using /landing when ever you want.
I know this is late but here is a quick and easy solution.
Add this in your login Controller
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
<ion-side-menus>
bcn
<ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
<ion-nav-view name="all"></ion-nav-view>
</ion-tab>
<ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
<ion-nav-view name="events"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-pane>
<div ng-include src="calender.html"></div>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
<i class="icon ion-home"></i>
What's New
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone">
<i class="icon ion-chatbox-working"></i>
Feedback
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
<i class="icon ion-power"></i>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
#Zulu here's my full code.
I hope this Ex. work for you.
// index.html
<body>
<section ui-view></section>
</body>
// routes.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
$urlRouterProvider.otherwise('/login')
it's work, see more here: angular-ui/ui-router
You have to watch the slide menu.
If it is open, you have to toggle it and close.
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
//
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio != 0) {
$ionicSideMenuDelegate.toggleRight();
}
});
})
Calling $ionicSideMenuDelegate.canDragContent(false) does disable the ability to swipe to access the menu, but does not hide the hamburger toggle button in the navbar (if you have one). To do that, you can use ng-show with $root binding in your ion-side-menu-content element like this:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"
ng-show="$root.showMenuIcon">
</button>
</ion-nav-buttons>
Then in your login controller:
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});
you can also add this to your main app controller:
$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;
and simply switch it to false in every controller you dont want your side menu appear in:
$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;
add is-enabled="$root.enableLeft" to your html tag and ng-show="$root.showMenuIcon" to the button inside html tag.
Based on various answers here from everyone and 15 minutes of trying, here is my working example of it, and it should work as simply doing copy-paste
Your view, like login.html
<ion-view hide-nav-bar="true">
<ion-header-bar class="bar-light title-image" align-title="center">
<h1 class="title">Title</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
Your related controller, like LoginCtrl
function LoginCtrl($scope, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
}
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/loginpage.html'
})
.state('app.account', {
url: '/account',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl'
}
}
})
import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';
#Page({
templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
constructor(nav: NavController, userData: UserData, menu: MenuController) {
this.nav = nav;
this.userData = userData;
this.login = {};
this.submitted = false;
this.menu = menu;
}
onLogin(form) {
this.submitted = true;
if (form.valid) {
this.userData.login();
this.nav.push(TabsPage);
}
}
onSignup() {
this.nav.push(SignupPage);
}
onPageDidEnter() {
// the left menu should be disabled on the login page
this.menu.enable(false);
}
onPageDidLeave() {
// enable the left menu when leaving the login page
this.menu.enable(true);
}
}
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
</ion-content>
</ion-pane>
This is works for me ...
I think the simplest solution in opening the login page in a modal view, checkout $ionicModal

Resources