So I have a Bottom Tabbed interface, with a listed Contact View. When you click on a contact it takes you too a Contact Details View for that contact.
Both Views have additional ion-tabs within them. The first Contact View works as expected, you can tab between "Friends", "Favorites", and "Requests". The problem happens when you enter the Contact Details View, clicking on any tab for that Contact will successfully switch tabs, but immediately take you back to the Contact View screen.
Here's a Plunker that shows what I mean:
http://plnkr.co/edit/Iuu1xgilMbGhmOeVkYKg?p=preview
For some reason in this Plunker it's defaulting to the Requests tab. So click Favorites, then Friends.
Click on a Contact and then a Tab for that Contact. It will take you back to the first screen.
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
The way I got around this was to have three buttons that replicated the tabs but changed view within the primary tab.
Related
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
In Ionic 3 application, I want to show the cancel button of ion-searchbar until the search bar has value.
Mine is a tab based application and on moving to other tab and coming back to the tab, the search text is been retained and I need the cancel button also to be visible if text exists in search bar. But it is not visible.
<ion-searchbar
#projectsearchbar name="query" (search)="doSearch($event)" [(ngModel)]="global.SearchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="onSearchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >
I tried to get the cancel element and set the style, but it didn't work
ionViewWillEnter() {
if (this.global.SearchFilter) {
let cancelBlurElement = <HTMLElement>document.querySelector(".searchbar-ios .searchbar-ios-cancel");
cancelBlurElement.style.display = 'block';
}
}
Also tried to get the search bar control by class name and added a custom class but it didn't worked.
ionViewWillEnter() {
if (this.global.projectSearchFilter) {
let el=document.getElementsByTagName('ion-searchbar');
el[0].classList.add('visible-cancel');
}
}
.visible-cancel {
display: block!important;
}
Also tried to import as view child,
import { Component, Output, NgZone, ViewChild } from '#angular/core';
export class SearchPage {
#ViewChild('projectsearchbar') searchbar:Searchbar;
ionViewWillEnter() {
this.searchbar.setFocus();
}
}
i had the same issue
resolved by using this CSS snippet in the encapsulating element
.encapsulating-element {
.searchbar-ios-cancel{
display: none !important;
}
}
I'm creating a simple Ionic menu app and I would like to reload the current state from the side menu.Here's a Plunkr to illustrate the problem.
In the 'Search' state, the current time is displayed. The desired behavior is the following: when I click 'Search' from the side menu, the time is refreshed, i.e. the controller is reloaded. This should happen even when I'm already on the Search page. In reality, the controller is of course much more complex, but this example is enough to illustrate the problem.
I started from the ionic 'menu' starter template. To be able to reload the state, I changed two things:
disabled view caching in app.js config function: $ionicConfigProvider.views.maxCache(0);
In menu.html, I'm passing ui-sref-opts to explicitly reload the state:
ui-sref="app.search" ui-sref-opts="{reload: true}"
The result is that the time is indeed updated, however, the header of the view is gone.
Any suggestions as to what I'm doing wrong?
try something like this in the routing:
.state('tab.home', {
url: '/home',
cache: false, //<-- FORCE TO CLEAR CACHE
views: {
'tab-home': {
templateUrl: 'templates/home/home.html',
controller: 'HomeController'
}
}
})
You can broadcast an event to achieve that. But if you want to keep it like that, you could use a parameter and it would be all right because basically the one in control of the date var is your menu and not your state.
So you could do this:
app.js
.state('app.search', {
url: "/search",
params:{
date: new Date()
},
views: {
'menuContent' :{
templateUrl: "search.html",
controller: 'SearchCtrl'
}
}
})
Menu item
<ion-item nav-clear menu-close ui-sref="app.search({date: updateDate()})">
Search
</ion-item>
controllers.js (App controller or specific menu controller)
.controller('AppCtrl', function($scope) {
$scope.updateDate = updateDate;
function updateDate(){
return new Date();
}
})
controllers.js
.controller('SearchCtrl', function($scope, $stateParams) {
$scope.now = $stateParams.date;
})
I have 2 views as follows
.state('tab.matches', {
url: '/matches',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches.html',
controller: 'MatchesCtrl'
}
}
})
.state('tab.matches-detail', {
url: '/matches/:matchId/:userId/:userName',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches-detail.html',
controller: 'MatchesDetailCtrl'
}
}
})
I have a button on a different view which on click calls a function in the controller as follows:
$scope.messageUser = function (postInfo) {
$state.go('tab.matches-detail', { matchId: var1, userId: var2, userName: var3 });
}
This redirects to the tab.matches-detail view as expected but a back button is not present. I would like the back button to redirect back to the parent view being tab.matches, or the view I originally redirected from. If I navigate from tab.matches to tab.matches-detail (when I have not redirected by $state.go) the back button is present. I however am going direct to tab.matches-detail when $state.go is called. As such I can no longer access tab.matches as if I click on another tab and then return to tab.matches it displays tab.matches-detail with no way to access the parent state of tab.matches. I can't figure out how to get the back button to display. I need this to be controlled from the controller rather than a href in the view as I need to call similar functionality from an Actionsheet where the logic is all controller side.
Apologies for the rather verbose explanation but I want to be clear on the issue.
Thanks in advance for your help.
Anthony
To resolve this issue I set the back button in the view as not visible by setting hide-back-button="true" in the <ion-view> tag, then added a button for the header as follows:
<ion-nav-buttons side="left" class="button-clear customButton">
<div class = "buttonMatchesInner" ng-click="matchesGoBack()">
<i class="ion-chevron-left matchLeftIcon"></i>
</div>
</ion-nav-buttons>
With the click event calling:
$scope.matchesGoBack = function() {
$state.go('tab.matches');
}