I am trying to accomplish both tabs and sliding side menu, but can't get back button appear after entering side menu item. I am new to Ionic/Angular Routing,but I am supposing that to make it work I need to manipulate with app.js and states.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon" ng-click="toggleRight()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-balanced">
<h1 class="title">MyApp</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close ui-sref="about">
About
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And my apps.js looks like this:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
(...tab states...)
.state('about', {
url: '/about',
templateUrl: 'templates/side/about.html',
controller: 'AboutController',
})
What should I do make back nav-button(or at least make some custom button on navigation bar to redirect home) appear when I am entering one of the side menu items and then template?
have you tried this?
$ionicNavBarDelegate.showBackButton(true);
$ionicNavBarDelegate api guide
You can include below code to enable back button.
< ion-side-menus enable-menu-with-back-views="true">
....
< /ion-side-menus>
http://ionicframework.com/docs/api/directive/ionSideMenus/
Related
I searched about this topic, but i didn't find a solution for fixing the issue.
Basically I am building a app with login which has a nav icon also (like in bootstrap).
What i need to accomplish here is, i want to hide that particular button in the login page only. Index.html
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<!-- right -->
<button menu-toggle="right" class="button button-icon icon ion-navicon" ng-hide="isInLogin"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
controller.js
controller('LoginController',function($scope){
//$scope.isInLogin=true;
$scope.$on('$ionicView.enter',function(){
console.log("inLogin");
$scope.isInLogin=true;
});
});
I have tried like this also
controller('LoginController',function($scope){
$scope.isInLogin=true;
});
app.js
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller:'LoginController'
})
.state('tabs',{
url:'/tabs',
comtroller:'TabController',
templateUrl:'templates/tabs.html',
abstract:true
})
I am still in the learning level, any idea about how it can be achieved?
<ion-nav-bar class="bar bar-header bar-dark bar-custom">
<ion-nav-back-button side="right"></ion-nav-back-button>
<ion-nav-buttons side="right" ng-if ="!$state.current.name==='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
</ion-nav-bar>
Actually, I have placed popup button in my index.html page so that it must come up everywhere but I want to remove it from my login and signup page
i have checked it in button using ng-if but nothing happens
How to remove popup from both signup and login page !
Your ng-if statement
ng-if !="$state.current.name==='Emaillogin'"
is wrong. it should be like
ng-if="!($state.current.name==='Emaillogin')" or ng-if="$state.current.name!='Emaillogin'"
Two things are wrong here:
$state can not be used in html page, use $state.current.name in Controller.
Your if condition is not correct.
So your code should be like:
In controller:
$currentState = $state.current.name
and in html page:
<ion-nav-buttons side="right" ng-if ="currentState!='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
I am building a demo application on ionic framework. My demo ionic application has three states :
$stateProvider.state("app", {
abstract : true,
url : "/app",
templateUrl : "app/templates/theme.html"
});
$stateProvider.state("app.dashboard", {
url : "/dashboard",
views : {
"content" : {
templateUrl : "app/modules/dashboard/dashboard.html",
controller : "dashboardController"
},
"settings" : {
templateUrl : "app/templates/settings.html"
},
"menu": {
templateUrl: "app/templates/menu.html"
}
}
});
$stateProvider.state("app.demo", {
url : "/demo",
views : {
"content" : {
templateUrl : "app/modules/demo/demo.html",
controller : "demoController"
}
}
});
And theme.html looks like this :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content drag-content="true">
<ion-nav-bar class="bar-stable nav-title-slide-ios7 two-side" align-title="center">
<ion-nav-back-button class="button-clear inverse">
<i class="icon ion-ios7-arrow-back">
</i>< Back
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" id="menuBtn" class="button button-icon icon ion-navicon inverse"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" id="settingsBtn" class="button button-icon icon ion-gear-b inverse"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="content">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-nav-view name="menu" animation="slide-left-right"></ion-nav-view>
</ion-side-menu>
<ion-side-menu side="right">
<ion-nav-view name="settings" animation="slide-left-right"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
Issue is when I am going from app.dashboard to app.demo first time,
demoController is called. Then I go back to app.dashboard. And when
again going to app.demo state any number of times, demoController is
never called. app.demo view is cached. I don't know why.
In addition, I don't want to put cache-view=false or cache false in routing config because that disables the caching of that page totally(Forward & Backward). I want to reload page when I go in forward direction like app.dashboard to app.demo but not to reload page when I go in backward direction like app.demochild(For example) -> app.demo.
If I delete both ion-side-menu tag from my theme.html, the issue gets resolved, demoController is called every time when going in forward direction, But I want both ion-side-menu to be present in my theme.html
I have even disabled the forward caching.
$ionicConfigProvider.views.forwardCache(false);
Any help would be highly appreciated.
Ionic broadcast multiple things while changing a route, like'$ionicView.beforeEnter', '$ionicView.enter' etc.
write condition to check whether its in forward direction / backward direction and call $state.reload() accordingly in your broadcast handler
$scope.$on("$ionicView.beforeEnter", function(event, data){
if()//check for the direction backward / forward
{
$state.reload();
}
});
Does anyone successfully add a page transition on nested views in angularjs/ionicframework
This is my code for my nested views. When I go to this page transition is not working
<ion-side-menus>
<ion-nav-view name="left"></ion-nav-view>
<ion-nav-view name="main"></ion-nav-view>
</ion-side-menus>
But if I put only this code
<ion-nav-view name="main"></ion-nav-view>
Page transition is working
I hope you can help me with this one. Thank you!
In you index.html you should have a single ion-nav-view (you can populate this ion nav view with multiple ion views) like so:
<div ng-app="ffApp" animation="slide-left-right" ng-controller="authRoute.controller">
<ion-nav-view></ion-nav-view>
Then you want to create states/child states to fill the view:
$stateProvider
.state('authenticate', {
url: '/authenticate',
templateUrl: 'templates/authentication.html'
})
.state('loginIos', {
url: '/loginIos',
templateUrl: 'templates/loginIos.html',
controller: 'loginIos.controller',
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'home.controller',
}).state('home.home1', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
Inside the template file you will have a ion-view with a side menu, if you want to populate the side menu as a child state you can create a child state inside the state provider and then place a ion-nav-view in side menu.
<ion-view>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="ContentController">
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
then when you navigate to a child state such as home.home1 the template for home.home1 will fill the menucontent ion-nav-view which is included in the home state template.
See this example: http://codepen.io/mhartington/pen/Bicmo/
I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.
I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.
My set up is this...
tabs: tab.feed, tab.friends, tab.account
other view: randompage
Here is my route set up...
.state('randompage', {
url:'/randompage',
templateUrl: 'templates/randompage.html',
controller: 'RandomPageCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
Here is the tabs.html
<ion-tabs class="tabs-icon-top tabs-top">
<!-- Feed Tab -->
<ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
<!-- The rest are just from the tab skeleton -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is the tab-feed.html
<ion-view title="Feed">
<ion-nav-buttons side="right">
<a class="button button-icon ion-android-camera" href="#/randompage"></a>
</ion-nav-buttons>
<ion-content class="padding">
<h1>Feed</h1>
</ion-content>
</ion-view>
Here is the randompage.html
<ion-view title="Random Page">
<ion-content lass="padding">
</ion-content>
</ion-view>
Everything navigates and shows correctly except the back button is not showing.
Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.
Thanks!
This has been a long time problem for me as well. While the history stack is broken in this use case, 'backView' in the history object is correct. The full history object can be seen with this log line:
console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );
My solution is to manually add in a Back button on global pages.
Global page html:
<ion-view view-title="Help">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>
Javascript:
$scope.goBack = function() {
$ionicHistory.goBack();
};
Another alternative is to modify the ionic source. Replace enabledBack() in ionic.bundle.js with this:
enabledBack: function(view) {
//original code
//var backView = getBackView(view);
//return !!(backView && backView.historyId === view.historyId);
//new code to show back
var backView = viewHistory.backView;
return backView != null;
},
I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.
splash view --> tab view --> random page (out of tab)
|
tab1 --> nested view (in tab)
|
tab2 --> nested view (in tab)
root history stack:
splash view ---> random page
tab history stack:
tab view ---> tab1 --> nested view
---> tab2 --> nested view
I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.
<ion-view title="tabs">
<ion-content padding="false">
<ion-pane>
<ion-nav-view name="tab-content"></ion-nav-view>
</ion-pane>
<div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</ion-content>
</ion-view>
then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.
I am sorry I don't have enough reputation to add a comment.
Ryan's answer worked like a charm for me(not the modify ionic source part), I just want to add a point that if one uses
ng-click="$ionicGoBack()"
instead of
ng-click="goBack()"
the Javascript can be omitted.