When I click the ionic navigation back button, app skip the immediate back page and redirected to the first page (ie. When click back from page5, it skip page4 and redirected to page3).
I also tried a manual back by writing a function but the result was same.
How can I resolve this?Please help...
My code
1.View
<div class="bar bar-header nav_header">
<button class="button icon ion-arrow-left-b button-clear btn-sm nav_headeritems" ng-click="backstate()">Go Back</button>
<h1 class="title nav_headeritems">Profile</h1>
</div>
2.Controller
$scope.backstate =function(){
$ionicHistory.goBack(-1);
//alert("back");
}
Related
I am in the process of testing a modal dialog using Katalon Studio, and the AUT is a web app that uses Bootstrap. I tried going to this official documentation on how to handle such elements, but that documentation was incomplete. It didn't contain instructions on how to handle my use case. I tried everything in it, and nothing worked.
Thus, even though my tests all pass (I did right up to closing the dialog by Clicking its "Ok" button), my teardown method (which logs out and closes the browser) is blocked by that annoying popup. At the end of the test, the "Ok" button was outlined a light blue, and I had to manually click it to get it to trigger.
The modal dialog's HTML code :
<div class="modal fade show" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Device Passcode</h5>
</div>
<div class="modal-body">
<p>36395732</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
A screenshot of the AUT, and the Katalon Studio screen, after that last test step:
I resolved the issue by focusing on the dialog prior to click, and then right after, focusing back on the main screen.
Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.
The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.
Is there any better design pattern for this?
<ion-view view-title="Sales">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="padding">
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Amount" ng-model="data.amount">
</label>
</div>
<button class="button button-block button-stable" ng-click="enter()">Save</button>
</ion-content>
</ion-nav-bar>
</ion-pane>
</ion-view>
To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page.
Like so
<ion-view hide-nav-bar="true">
This will hide the whole nav-bar when you enter the view
For hiding back button just add this tag to your view just like this
<ion-view title="Login" hide-back-button="true">
When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.
How can I force Ionic to display back button on certain page?
Javascript:
.state('app.tab.playlists', { //<!-- Tab content page
url: '/playlists',
views: {
'tab-Content': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
url: '/singer',
views: {
'menuContent': {
templateUrl: 'templates/singer.html'
}
}
})
You can tell it in your controller. Try:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
But like LeftyX said. The history function for tab to non tab view is buggy.
Ionic manages a history while you're navigating from one view to the other.
$ionicHistory keeps track of views as the user navigates through an
app. Similar to the way a browser behaves, an Ionic app is able to
keep track of the previous view, the current view, and the forward
view (if there is one). However, a typical web browser only keeps
track of one history stack in a linear fashion.
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:
The back button does not display because when you go into a tab, it
enter's it own "history", meaning each tab has its own navigation back
and forward.
So, basically, when you move from tabs to regular view you're going to lose the back button.
What you can do is to create one yourself:
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
and place it inside your view:
<ion-view view-title="home">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
As you can see I've used ng-click="goBack()" for the button.
In your controller you simply would:
$scope.goBack = function(){
$ionicHistory.goBack();
}
don't forget to inject $ionicHistory in your controller.
PS: This is a over-simplified solution as it does not check if the history has got a backview:
$ionicHistory.viewHistory().backView
Add follwing lines inside your
<ion-navbar hideBackButton="true">
<button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>
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'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit