i have ionic app with side menus having home , login , dashboard, logout(items).
I am using server api to login user , i want when used is logged in side menu items login to be not there and dashboard, logout to be added , same way when user logouts he can see login but not logout and accoun menu .
Below is my code :
http://codepen.io/gauravcoder/pen/bEjGNa
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic page</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
</head>
<body ng-controller="HomeTabCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view animation="slide-left-right"> </ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="list">
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
<a class="item item-icon-left" href="#login" ng-hide="show_menu" > <i class="icon ion-chatbubble-working" ></i>Login</a>
<a class="item item-icon-left" href="#account" ng-hide="show_menu"> <i class="icon ion-mic-a"></i> Account</a>
<a class="item item-icon-left" href="#" ng-hide="show_menu"> <i class="icon ion-mic-a"></i> Logout</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">
<ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
<ion-nav-view name="tab1-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
<ion-nav-view name="tab2-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
<ion-nav-view name="tab3-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
<ion-nav-view name="tab4-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
<ion-nav-view name="tab5-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()" ui-sref="tabs.tab6">
<ion-nav-view name="tab6-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button class="button button-block button-positive" ng-click='next()'> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
</script>
<script id="templates/tab1.html" type="text/ng-template">
<ion-view view-title="tab1">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
</div>
</div>
</ion-view>
</script>
<script id="templates/login.html" type="text/ng-template">
user name is {{user.name}}
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Buy Now" nav-bar-class="bar-balanced" cache-view="false">
<ion-header-bar class="bar-positive" align-title="center">
<button class="button button-clear button-light" ui-sref='tabs.tab1'><i class="ion-chevron-left"></i></button>
<h1 class="title">Login</h1>
</ion-header-bar>
</ion-nav-bar>
<ion-content class="padding">
<div class="list">
<form method="post" action="" id="form-id">
<label class="item item-input">
<input type="text" placeholder="Username" id="username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" id="password">
</label>
</form>
</div>
<div class="row">
<button class="button button-block button-positive" ng-click="signIn()">
Login
</button>
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/next.html" type="text/ng-template">
<ion-view view-title="View Cart" nav-bar-class="bar-balanced">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
clicked id :
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ngAnimate']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.tab1', {
url: "/tab1",
views: {
'tab1-tab': {
templateUrl: "templates/tab1.html",
controller: 'Tab1Ctrl'
}
}
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: "login"
}).state('account', {
url: "/account",
templateUrl: "templates/account.html",
controller: "account"
})
.state('next', {
url: "/next",
templateUrl: "templates/next.html",
controller: "NextController",
params: {
clickedid: null
}
})
$urlRouterProvider.otherwise("/tab/tab1");
}).controller('account', function ($scope,$http,$ionicPopup) {
}).controller('login', function ($scope,$http,$ionicPopup) {
$scope.signIn = function () {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
$scope.show_menu = true;
var alertPopup = $ionicPopup.alert({
title: 'sucess',
template: 'now logout and account should show'
});
};
}).controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate, $state) {
$scope.show_menu = false;
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.toggleRightSideMenu = function() {
console.log('rigth open')
$ionicSideMenuDelegate.toggleRight();
};
console.log('HomeTabCtrl');
$scope.next = function(){
$state.transitionTo('next');
}
}).controller("NextController", function($scope){
$scope.showAlert = function(){ alert("I'm a modal window!") }
});
</script>
</body>
</html>
Im not exactly sure which elements you wish to show or hide but unless I miss understand you, why not just use ng-hide or ng-show as follows:
<ion-side-menus ng-hide="!show_menu">
</ion-side-menus>
or
<ion-side-menus ng-show="show_menu">
</ion-side-menus>
https://docs.angularjs.org/api/ng/directive/ngHide
i didn't go over your code, but you can just make a script that checks if user is logged in / logged out and just hides the the Login or Logout link.
for example in your CSS make a class
.hidden{
display: none;
}
then make a script that checks if user is logged in and hides if he is
if (userLoggedIn){
$(loginButton).addClass("hidden");
$(logoutButton).removeClass("hidden");
}
else{
$(logoutButton).addClass("hidden");
$(loginButton).removeClass("hidden");
}
where loginButton holds the id of the login button and same for logoutButton.
you get the drift i hope.
First change the html with the following
<a class="item item-icon-left" href="#login" ng-hide="show_menu" > <i class="icon ion-chatbubble-working" ></i>Login</a>
<a class="item item-icon-left" href="#account" ng-show="show_menu"> <i class="icon ion-mic-a"></i> Account</a>
<a class="item item-icon-left" href="#" ng-show="show_menu"> <i class="icon ion-mic-a"></i> Logout</a>
and then in the login controller initialize the show_menu variable before defining the signIn function. like
.controller('login', function ($scope,$http,$ionicPopup) {
$scope.show_menu = false;
$scope.signIn = function () {
//your code
$scope.show_menu = true;
//your other code
};
})
here's what you can do:
add this function to your js
function toggleHide(){
var elements = document.getElementsByClassName("toggle-hide");
for(var i = 0; i < elements.length; i++){
elements[i].onclick = function(){
var containerid = this.getAttribute('data-hide-container');
document.getElementById(containerid).classList.toggle('ng-hide');
}
}
}
I made that using pure js so is not gonna be a problem.
add this to your css:
.ng-hide{
display:none;
}
you can use that like this:
<button class="toggle-hide" data-hide-container="searchMapContainer"></button>
I created the function having the data-hide-container as an ID of the element that you want to hide. You can change that to use class instead if necessary.
call the function toggleHide() inside the controller you want to use.
I hope it helps.
Related
I'm kinda tearing my hair out with that: I have an ionic app with tabs. Basic. And in one of my tabs I would like a master detail list. I have a list and I want a new page to appear when I click on an item. Simple. BUT I guess I kinda mess up with routes and I'm spining around with this.
<body ng-app="ionicApp">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Carte" icon="ion-map" href="#/tab/map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Compte" icon="ion-person" href="#/tab/account">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Favorite" icon="ion-ios-cart" href="#/tab/favorite">
<ion-nav-view name="favorite-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Cave" icon="ion-ios-wineglass" ui-sref="tabs.cave">
<ion-nav-view name="cave-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/map.html" type="text/ng-template">
[...]
</script>
<script id="templates/account.html" type="text/ng-template">
[...]
</script>
<script id="templates/favorite.html" type="text/ng-template">
[...]
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/cave.html" type="text/ng-template">
<ion-view title="Cave">
<ion-content>
<div class="list" ng-controller="CaveCtrl">
<a ng-repeat="wine in wines"
class="item item-thumbnail-left"
ui-sref=" tabs.cave.wine({ wineId: wine.id })" >
<img ng-src="{{ wine.image }}">
<h2>{{ wine.name }}</h2>
<h3>{{ wine.year }}</h3>
<p>{{ wine.appellation }}</p>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="wine.html" type="text/ng-template">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Wine details</h1>
</ion-header-bar>
<ion-content>
<h1>HI IT'S WORKING</h1>
</ion-content>
</script>
</body>
There are routes in my app.js :
.state('tabs.cave', {
url: "/cave",
views: {
'cave-tab': {
templateUrl: "templates/cave.html"
}
}
})
.state('wine', {
url: 'tab/cave/:wineId',
templateUrl: 'wine.html',
controller: 'WineCtrl'
});
$urlRouterProvider.otherwise("/tab/account");
And some controllers :
App.controller('CaveCtrl', function($scope, $location) {
$scope.wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
];
});
App.factory('Wines', function () {
var wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
]
return {
getById : function (id) {
return wines[ wines.lastIndexOf(id) ]
}
}
});
App.controller('WineCtrl', function($scope, $http, $stateParams, Wines) {
console.log(Wines);
});
Any ideas would be nice :) thank you in advance
Try :
<a ng-repeat="wine in wines"
class="item item-thumbnail-left"
ui-sref="wine({ wineId: wine.id })" >
src : Ui-sref is not generating the right url in ionic framework
I tried many solutions to display side menu button but none appears to work. Let me know what I am missing. I want to have left side menu burger icon on my left side along with the tabs as well.
If anything else you need from my side, let me know please.
app.js
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
})
Following is my content in tabs.html file -
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="snd" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="snd.home" nav-clear class="item">Home</a>
<a ui-sref="snd.chat" nav-clear class="item">Chat</a>
<a ui-sref="snd.drink" nav-clear class="item">Drink</a>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
Create a specific controller (in the example below is 'NavCtrl') and attach to <ion-side-menu> with ngController directive. In that controller you add the $ionicSideMenuDelegate.toggleLeft(); method.
Here is a working snippet:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/tab-activity");
})
.controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.showMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('tabActivityCtrl', function($scope) {})
.controller('tabProfileCtrl', function($scope) {});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Home</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Chat</a>
</li>
<li>
<a class="item" menu-close href="#/tab/drink">Drink</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab-activity.html" type="text/ng-template">
<ion-view title="tab-activity">
<ion-content>
<h3>tab-activity</h3>
<p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-profile.html" type="text/ng-template">
<ion-view title="tab-profile">
<ion-content>
<h3>tab-profile</h3>
<p>bla bla bla </p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Have you added the Delegate function? :
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
I'm new to the Ionic Framework and I am on a mac. When I save my changes (cmd-S) to index.html, I instantly see my changes in the browser.
However, when I run the command 'ionic serve' or 'ionic run android', I am not seeing my changes, but instead its showing me things that I added a few hours ago. I would love to provide images but I need 10 rep to add images. I hope my code is enough to help me out.
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="tutorial.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ionic.angular.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="js/app.js"></script>
<script src="cordova.js"></script>
<body ng-app="chApp" animation="slide-left-right-ios7">
<ion-nav-bar class="nav-title-slide-ios7 bar-light">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/intro.html" type="text/ng-template">
<ion-view>
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="!slideIndex">Skip Intro</button>
<button class="button button-positive button-clear no-animation" ng-click="previous()" ng-if="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-if="slideIndex != 4">Next</button>
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="slideIndex == 4">Begin</button>
</ion-nav-buttons>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h2>Welcome to Classroom Hero! Swiping is the easiest way to navigate the app. Swipe now to begin the tutorial!</h2>
</ion-slide>
<ion-slide>
<h2>Reward Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Market Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Jar Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Registration Stamp Screen</h2>
</ion-slide>
</ion-slide-box>
</ion-view>
</script>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Reward" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-controller="MainCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">Reward</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="MarketPlace" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">MarketPlace</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="Classrom Jar" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Classroom Jar</h1>
</header>
<ion-content has-header="true">
<h1>Settings</h1>
</ion-content>
</ion-tab>
</ion-tabs>
</script>
and here is my javascript file
angular.module('chApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'templates/tabs.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise("/");
})
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
// Called to navigate to the main app
$scope.startApp = function() {
$state.go('tabs');
};
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})
.controller('MainCtrl', function($scope, $state) {
console.log('MainCtrl');
$scope.toIntro = function(){
$state.go('intro');
}
});
My project is organized in such a way that I want the user to be able to navigate between view in a list that are in a certain order. The default slide transition takes into account the user's navigation history, which is sometimes good and sometimes bad. Is there a way to simply pass along which way I want the view to slide?
Here is a Codepen that demonstrates the issue I am having.
<!-- Codepens on StackOverflow require code to accompany the link. The link is much easier to follow, but here is the code just in case you cannot view the codepen or if the link is broken in the future. -->
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.detailview', {
url: "/detailview/:index",
views: {
'home-tab': {
templateUrl: "detailview.html",
controller: 'DetailviewTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
$scope.details = [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}];
})
.controller('DetailviewTabCtrl', function($scope,$stateParams) {
$scope.id = parseInt($stateParams.index);
$scope.previous = parseInt($stateParams.index) - 1;
$scope.next = parseInt($stateParams.index) + 1;
});
</script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-stable">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-stable">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Example of the navigation issue. If you go to item 1, then item 2, then back to item 1, the transitions look correct.<br/> However, if you start over and go to item 2, then item 3, then back to item 2, then to item 1, the transitions appear to slide in from the wrong direction.</p>
<p>
<ion-list>
<ion-item ng-repeat="detail in details" ng-href="#/tab/detailview/{{detail.id}}" class="item item-icon-right ">
Item {{detail.id}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</p>
</ion-content>
</ion-view>
</script>
<script id="detailview.html" type="text/ng-template">
<ion-view title="Details on item {{id}}">
<ion-content class="padding">
<ion-nav-buttons side="right">
<a ng-href="#/tab/detailview/{{previous}}" class="button button-clear button-dark" ng-disabled="previous == 0"><i class="ion-chevron-left"></i></a>
<a ng-href="#/tab/detailview/{{next}}" class="button button-clear button-dark" ng-disabled="next == 6"><i class="ion-chevron-right"></i></a>
</ion-nav-buttons>
<h2>{{id}}</h2>
<p>Please use the navigation buttons on the top left of the screen.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
After you have selected an item, use the navigation buttons on the top right of the screen to navigate back and forth. If you start with the first item, all transitions appear normal. By that I mean, when you press right, the new screen slides to the in from the right. However, if you start with a different item, the direction in which the screen slides in from varies based on your navigation history.
Is there any code changes or attributes that I could use to explicitly state which way I want the screen to side?
You can use nav-direction="back" and nav-direction="forward" on your navigation buttons. http://codepen.io/enbashi/pen/MYRNjy
Hey everyone I've been running into some issues with the header and scrolling on the side menus.
Although I've taken it out from this snippet, i've tried putting class/attr has-header in just about every possible combination:
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button icon ion-arrow-left-a" ng-click='back()'></button>
<h1 class="title">Ionic Shopping Checkout</h1>
<button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
</ion-header-bar>
<ion-purchase></ion-purchase> // custom directive
<ion-purchase-footer></ion-purchase-footer> // custom directive
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
</ion-side-menu>
</ion-side-menus>
Additionally, my ng-repeat of items in the side menu isn't scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I'm curious if anyone has come across that issue too.
Thanks for all the help in advance!
As mentioned above, the has-header attribute has in fact been removed. However, the has-header class still exists. Generally speaking, you don't need to manage those now.
I've setup a sample that should solve all of your problems.
http://codepen.io/calendee/pen/Fuejf
The key points are the same as those comments above, you content needs to go inside the ion-content directives.
Here is the HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
</head>
<body>
<div ng-controller="AppController">
<ion-nav-view></ion-nav-view>
</div>
<script id="app.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view name="appContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-cart ng-controller='CartController'></ion-cart>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Ionic Shopping Checkout">
<ion-content padding="true">
<ion-purchase></ion-purchase>
</ion-content>
</ion-view>
</script>
<script id="ionCart.html" type="text/ng-template">
<div class="list">
<div class="item" ng-repeat="item in data.items">{{item.label}}</div>
</div>
</script>
</body>
</html>
Here is the JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app.html"
})
.state('app.home', {
url: "/home",
views: {
'appContent' :{
templateUrl: "home.html",
controller : "HomeController"
}
}
})
$urlRouterProvider.otherwise("/app/home");
})
.controller('AppController', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller("HomeController", function($scope) {
})
.controller("CartController", function($scope) {
$scope.data = {
items : []
};
for(var i = 0; i < 25; i++) {
$scope.data.items.push({
id : i,
label : "Item " + i
})
}
})
.directive("ionCart", function() {
return {
restrict : "E",
templateUrl : "ionCart.html"
}
})
.directive("ionPurchase", function() {
return {
restrict : "E",
template : "<h2>This is Ion Purchase</h2>"
}
})