I want to load a new view when a certain button is pressed. The view that loads should not show a back button to the previous page.
Back Button code:
<ion-nav-bar class="bar bar-header ionBarM " align-title="left">
<ion-nav-title >
<a ui-sref="app.feed" ng-click="getEList()" > BACK<i class="pull-left ion-chevron-left"></i></a>
</ion-nav-title>
On your <ion-view> add the hide-back-button attribute: <ion-view hide-back-button="true">
The functionality is clearly explained in the official documentation for ion-view: http://ionicframework.com/docs/api/directive/ionView/
For latest Ionic versions try using
<ion-navbar hideBackButton >
This should work.
Related
I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only
There are similar question but not this exact one. I have this structure in an ionic app view
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit"></span>
</a>
<img src="img/logo_header.png">
</ion-nav-title>
<ion-content class="star-wrap">
.
. contents
.
</ion-content class="star-wrap">
What I'm trying to achieve is show the ion-android-exit button instead of the menu button in this specific view.
Is this possible?
There was a (way) easy and simple way to do this.
Adding <ion-nav-buttons></ion-nav-buttons> inside <ion-view></ion-view> will rewrite the menu button with whatever I want, or just hide it with no contents.
You need to use ng-if like in example here.
http://codepen.io/anon/pen/AXkJGa
after setting the value of ng conditional to true in the controller.
Example HTML
<title>Ionic Modal</title>
<body ng-controller="State1Ctrl">
<ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit" ng-if="!hidethisview"></span>
</a>
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
</ion-nav-bar>
And JS
angular.module('ionicApp', ['ionic'])
.controller('State1Ctrl', function($scope, $state) {
if($state.current.name=="")// you need to have your state name inside quotes
//this example don't have one
{
$scope.hidethisview=true;
}
});
I have sidemenu template but as sidemenu is everywhere, I do not want it to display on log in untill user logs in, I hit Ionic - How to remove sidemenu on login page only? and see solution from #Waqas where he suggested $ionicSideMenuDelegate.canDragContent(false) so just wondering if it can working something like
sudo
if user not logged in
$ionicSideMenuDelegate.canDragContent(false)
put it in your login page.
<ion-view title="" hide-nav-bar="true">
and this in your menu: (userislogged is a var in your controller)
<div ng-if="userislogged">
<ion-side-menu side="left" expose-aside-when="large">
menu.... here
</ion-side-menu>
</div>
I hope this help you....
Using the Ionic tabs and nav demo I have been building a simple app.
Here is codepen of example I have been using as a template to follow:
http://codepen.io/ionic/pen/odqCz
In my app I want to add info button to the nav bar, this can be 'secondary' (right) to not interfere with the back button that appears on the left when navigating through the stack.
Here is the /template for one of the tabbed pages that I have added an info button:
<ion-view view-title="Gallery">
</button>
</ion-nav-buttons>
<ion-content class="padding">
<h3>Digit2Widgets Gallery Showcase.</h3>
<p>
<a class="button button-block button-light" href="#/tab/Demo1">Gallery Demo 1</a>
<a class="button button-block button-light" href="#/tab/galleryDemo2">Gallery Demo 2</a>
</p>
</ion-content>
</ion-view>
Now the gallery demo button bellow works and navigates to demo1 but the button at the top added to nav bar does not, even though they are structured in the same fashion? How can I fix this?
is there an easier way to add a permanent info button to the right of the nav bar?
Any help greatly appreciated.
Fred
I have actually got the answer now:
When adding buttons to Nav You should use ui-sref to navigate by passing the state name:
<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.Demo1">
:)
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!