I have 2 - 3 pages that are a child section within a page, similar to tabs. Logically the user would not expect to go back to the previous tab on the back click. As these are implemented as separate pages the user is taken back to the individual tabs and not to the main section.
How can I get the user back to a custom URL only for some pages?
When you go to a new tab, you could delete the previous one from history with :
$ionicHistory.removeBackView();
Docs
If you want to custom your back function in devices i recommend this:
$ionicPlatform.registerBackButtonAction(function,priority)
In that function you can use $state.go to redirect where ever you want.
Docs here
You can skip back navigation history by using ui-view instead of ion-nav-view component.
So if for example you were using:
<ion-tabs>
<ion-tab ui-href="state">
<ion-nav-view name="content"></ion-nav-view>
</ion-tab>
</ion-tabs>
You would turn it into:
<a ui-sref="state">Link</a>
<div>
<ui-view name="content"><ui-view>
</div>
It will require some more template layout changes but this should get you started. Basically if you use ion-nav-view you'll get history and ionic.view events, if ui-router only then just view changes.
Related
I have a page called Matches and feeds. In the matches pages I have 3 tabs as below
<ion-tab [root]="tab1Root" tabTitle="Applied" id="active" #active></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Failed"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Saved"></ion-tab>
So when I navigate from feed page to matches page I want to navigate to the tab1Root tab. When from some other page I navigate or click on the matches page Then i want it to navigate to the tab1Root automatically and refresh the page. How can I do it? When I navigate from the feeds page to matches page I'm not getting the output which is present in my tab1Root IonViewDidEnter(). How can I solve this issue?
You should use ionViewWillEnter instead of ionViewDidLoad to reload a tab page every time the user enters this page.
To switch programmatically to another tab:
this.navCtrl.parent.select(0) //your tab index
I'm new to Ionic 3, and what I want to do it's to get the specified scenario:
I go to Tab 1, click on some Item in Tab 1 and go to a view of this item, If I now switch to Tab 2, when I go to Tab 1, the view showed should be the Tab 1 view, not the Item View for a Tab 1 element.
In ionic 1 I previously have used $ionicHistory.clearHistory() but seems now it's not available. I've tried several uses of NavController but seems I am not using it properly or where it means to be used. How can I accomplish this scenario? Also I want to disable the back button in the root Tab 1 view, like, I don't want to see any type of back button when I'm on this view, without any exception.
Thanks in advance!
if any content of some tab link to a new page . the tab should be in hidden state so add this attribute "tabsHideOnSubPages" to your tab tag.
example:
<ion-tabs>
<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
So in this case when the first tab has button link to another page the state of toolbar tabs will be in hidden state and thats will not happen for second and third tab because the value of "tabsHideOnSubPages" attribute is false by default.
I know we can pass data to the child tab from parent tab by doing following as described here:
<ion-tabs>
<ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"><ion-tab>
</ion-tabs>
Is there any way I can do the reverse stuff i.e passing the data from child tab to parent tab.
I have the following scenario:
1. I have "next" button on the the Tabs(parent) page.
2. When user selects the value on the child page then I need to navigate the user to next page based on the selected value when he clicks next.
I have met your problem. you should use Events in Ionic 2 for sending and responding to application level across your app. So you can send data from child tab to parent tab and update status for it.
I have a simple app which always starts up a dashboard. This is the initial page where the user has an overview over the current state.
From there he navigates to modules using direct links on the dashboard itself or the given side menu.
In every module there should be a back-button visible to reach the dashboard. Whenever the user navigates from Module A to Module B (using the side-menu, which is always available!) the back-button should not navigate back to Module A, it should target the dashboard...
Here a sketch how it should be:
Red: Expected back navigation from view
Blue: Possible navigation on
screen
Blue (dotted): Possible Navigation using the side menu
Is there any way to archive this?
Yes it's possible. The easiest way to achieve this is to just forget (disable) the Ionic default back button and place one of your own in there. Have a abstract controller for the whole app or make your own for the header or where ever you would like the back button to be (a place where to place the controller code). For example:
HTML:
<button class="button button-clear header-item" ng-click="goToDashboard()">
<i class="icon ion-android-arrow-back"></i>
</button>
Controller:
$scope.goToDashboard = function() {
$state.go('dashboard');
};
Here is a simple Codepen about the solution: https://codepen.io/thepio/pen/GqvvjA?editors=1010
In this example you can just navigate to different tabs through the content and then navigate back to dashboard with the arrow on the left top corner.
We are using the ionic framework. We have an html title tag in our parent page's head i.e. <title>our app</title>. This seems to get overwritten in our login page when using <ion-view title="Login"> and it sometimes get's overridden in other pages I can't really figure out why certain ones do get overridden and others don't.
We want the parent's page title to remain the title throughout the entire app. I would take out the ion-view title but it gives our pages headers, which we still want.
I was adding titles like so:
<ion-view title="login">
this was in order to get the title in the top nav bar when I added the titles like this instead I would get the titles in the nav bar without affecting the title of the page.
<ion-view>
<ion-nav-title>Emergency Contacts</ion-nav-title>
...
</ion-view>