I'm so early for ionic framework, and i'm trying to make mobile apps with ionic.
I was wondering how to change the overall look, if it makes the website quite by < a href="#">, but in ionic how it works (?)
I'm trying to add some code app.js :
config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'templates/add-expense.html'
})
});
this my code index.html :
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-header bar-dark">
<button class="button button-clear button-positive">Edit</button>
<div class="h1 title">23 Desember 20014</div>
<button class="button button-icon icon ion-navicon" menu-toggle="right"> </button>
</ion-header-bar>
<ion-content>
<div class="row green">
<div class="col">Income</div>
<div class="col price">3,550,000</div>
</div>
<div class="row expense orange">
<a class="col" href="#/app/expense">New Expense</a> <!-- try to link templates/add-expense.html -->
</div>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<a menu-close href="#" class="item">Home</a>
</ion-side-menu>
</ion-side-menus>
<body>
Anyone can help me? Thanks in advance.
There is updated working plunker. I am not expert of the ionic, so just basics are fixed/improved.
One issue is, that the config should be a method of something:
// wrong
config(function($stateProvider) {
...
The app is having config method
var app = angular.module('starter', ['ionic'])
...
app.config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'add-expense.html',
})
});
Also, I wrapped the content with <ion-nav-view>, as a placeholder for the state expenses (it must be injected into some ui-view="" - unnamed anchor)
But these are few adjustments just to make it running, you should investigate the ionic more, read about it, to understand the concept, because e.g. the add-expsenses.html is not the way...
Check it here
You have problem with config section , should use this way.
And use also in html. And remove unused code on "add-expense.html" Use need to add template which you need to show.
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'add-expense.html'
})
});
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
Related
I'm trying to go to a page(template) using $state.go.
Controller
.controller('NavCtrl', function($scope, $location, $state) {
$scope.openDaily = function() {
$state.go('daily');
};
})
It works but for only a millisecond or something as it's redirected BACK to the '/select' page because the $state.otherwise says so.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('select', {
url: '/select',
templateUrl: 'templates/select.html',
controller: 'selectController'
})
.state('daily', {
url: '/daily',
templateUrl: 'templates/daily.html',
controller: 'dailyController'
});
$urlRouterProvider.otherwise('/select');
})
What is causing this please?
UPDATE
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-view>
</ion-nav-view>
</body>
select.html
<ion-view title="Select" ng-controller="NavCtrl">
<ion-content>
<div class="list-card" ng-click="openDaily()">
<a href='#' class="item item-icon-left">
<i class="icon ion-home"></i>
Personal
</a>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Add File/Folder</div>
</div>
</ion-view>
and daily.html(template):
<ion-view title="Select" ng-controller="NavCtrl">
</ion-view>
Using Ionic Framework.
Please remove href='#' from <a> tag. Because this will call default state(Here it is select state).
Looks like a cache problem, because everything looks correct, make sure the file is changed on you browser inspector and anything is broken on the console.
P.S: You can use also ui-sref="daily", if you just want go to the page.
I am a novice to ionic and AngularJS so suspect I am doing something stupid but can't for the life of me work out what. I am using the ionic starter template for a side menu app. I have added another menu item for a 'new home' page. Into this page I have added some code from the ionic code pen example for an introduction slide show. Unfortunately I only get an empty page rather than the slide show.
My home.html template looks like this:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Intro">
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="!slideIndex">
Skip Intro
</button>
<button class="button button-positive button-clear no-animation" ng-click="previous()" ng-show="slideIndex > 0">
Previous Slide
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation" ng-click="next()" ng-show="slideIndex != 2">
Next
</button>
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="slideIndex == 2">
Start using MyApp
</button>
</ion-nav-buttons>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="http://code.ionicframework.com/assets/img/app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
</ion-view>
My app.js looks like this:
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
// :NEW: Added stuff to show a home page
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'IntroCtrl'
}
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
My controllers.js looks like this:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
The menu.html looks like this:
<ion-side-menus enable-menu-with-back-views="false">
<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="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<!-- :NEW: Added New Home menu item -->
<ion-item menu-close href="#/app/home">
New Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I run this app, open the menu, and select the New Home menu option the home.html page does not show properly, it is blank. I am sure I must be doing something stupid here.
I found my stupidity!
I had copied a line from the codepen example that wasn't needed and broke my code. Removing the following code from the home.html fixes the problem.
<script id="templates/home.html" type="text/ng-template">
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>
I am trying to get my dashboard view from template folder when I am loading my app. I am using Ionic frame work.
My index
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark main-header">
<h1 class="title main-header-title"><strong>Recharge Plans</strong></h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
My app.js
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
My controller.js
angular.module('starter.controller',[])
.controller('DashCtrl', function($scope) {
alert("ok");
})
In 'www\templates' I have a file named dash.html.
My dash.html is
<ion-view ng-controller="DashCtrl">
<ion-content>
<div class="list searc-panel">
<label class="item item-input item-select">
<div class="input-label">
Select Operator
</div>
<select>
<option>Select</option>
<option>Airtel</option>
<option>Vodafone</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Select State
</div>
<select>
<option>Select</option>
<option>West bengal</option>
<option>Kolkata</option>
</select>
</label>
<button class="button button-full button-positive">
Search My Plans
</button>
</div>
</ion-content>
</ion-view>
But when i hit 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html' in browser then it renders me to 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html#/dash' with a blank view .
What I miss??
If you are going to name your views with Ionic then your ion-view tab HTML needs to look like this:
<ion-nav-view name="you-view-name"></ion-nav-view>
Usually with Ionic apps you have a root state and everything stems off that, so:
app.js file:
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '/',
templateUrl: '/templates/tabs.html',
controller: 'rootCtrl'
}
});
.state('root.dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
index.html:
<ion-nav-view></ion-nav-view>
tabs.html:
<ion-nav-view name="dash"></ion-nav-view>
In any case, if you are naming your views them your ion-view HTML tag needs to have a name attribute with the name of the view in it.
Hope this helps
you should not run ionic app by "file:///C:/Users/Sanjeev/RechargePlans/www/index.html". you should be using ionic cli tool to run your ionic project. Go to cmd > navigate to your project folder and than run ionic serve and you will be able to see output.
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