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');
}
Related
I'd like to open a modal in Ionic 5 just opening a page. Without any action, just load the page and hop! you get your modal.
I've been reading the documentation at https://ionicframework.com/docs/api/modal#events but is too cryptic for me. Need some more elaboration...
I´ve fount severals examples out there of opening the modal with a click event, but that's not what I need.
Thanks in advance!
Look into Ionic's lifecycle hooks which let you execute code at different moments during a component's existence. You'll probably want to call a modal creating method inside of the ionViewDiDEnter hook within the component where you want the modal to appear.
Something like this:
export class YourPage {
constructor(public modalController: ModalController) { }
ionViewDidEnter() {
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: YourModalComponent
});
return await modal.present();
}
}
I am working on a SAP Fiori app and I am stuck in this problem for about 2 weeks with no result. I have a "create" fragment which is attached to "Detail" view.
When I open the "create" fragment and want to go back to the main detail view, the back button doesn't work therefore I have to refresh the app.
I guess the back button doesn't work the same way between views & between fragments.
Here's my back button function :
cancel: function() {
var oHistory = sap.ui.core.routing.History.getInstance(),
sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
// The history contains a previous entry
history.go(-1);
}
},
Here when I display sPreviousHash, it's undefined. Why?
Where is the back button that you are referring to?
I would expect that the fragment is a dialog and therefore that there is no back button. A close button is needed which will result in the fragment being closed. Depending on the requirements, the back navigation could then be done from the controller where the fragment was created.
Fragments are a technique to reuse UI parts, but are not part of the MVC concept. You cannot navigate directly to/from a fragement and this has to be done using views. Therefore the history is not available in a fragment. The BROWSER back button will take you to the previous screen in the BROWSER history.
Controller of the view in which the fragment as a dialog is opened.
_initializeReviewDialog: function() { this._oReviewDialog = sap.ui.xmlfragment(this.getView().getId(), "ReviewDialog", this);
this.attachControl(this._oReviewDialog);
},
Event in View that triggers the dialog opening
onEditReviewPressed: function(oEvent) {
if (!this._oReviewDialog) {
this._initializeReviewDialog(); }
}
this._oReviewDialog.open();
},
onReviewDialogOKPressed: function(oEvent) {
this._oReviewDialog.close();
},
Add fragment as a Dependent, so that models and events from owning view/controller are know
attachControl: function(oControl) {
var sCompactCozyClass = this.getOwnerComponent().getContentDensityClass();
jQuery.sap.syncStyleClass(sCompactCozyClass, this.getView(), oControl);
this.getView().addDependent(oControl);
},
FragmentDefinition
<core:FragmentDefinition id="ReviewDialogFragment" xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core">
<Dialog id="reviewDialog" >
<content>
... </content>
<beginButton>
<Button id="btnOK" text="{i18n>xbut.ok}" press="onReviewDialogOKPressed"/>
</beginButton> </Dialog>
</core:FragmentDefinition>
this is Ionic version 1 question:
i have 4 tabs, each of the tab have it's content, one of them have a list inside it...
so if we have a list inside 3rd tab, then we choose the list and go to single page with back button...
after i tab the back button, it back to 1st tab, not to 3rd tab...
it seems that it cannot remember the position by default, i have tried some workaround like this...
i set the tab just before it enter the previous page:
$scope.$on("$ionicView.beforeEnter", function (event, data) {
$ionicTabsDelegate.select($scope.maintabindex);
});
with this on-select on each tab:
<ion-tab title="Forum" icon-on="ion-tab-fa-headphones" icon-off="ion-tab-fa-headphones" on-select="tabSelected()" href="#/app/home">
and then i have this function:
$scope.tabSelected = function () {
$scope.maintabindex = $ionicTabsDelegate.selectedIndex();
};
the problem is, the on-select method executed after i back to the parent page (*with tab page), so it cannot working well, because $ionicTabsDelegate.selectedIndex() on-select always give 0 index after i back from the single page to the tabbed page
any idea?
The ionic go back button should work in those scenarios, be sure that the child's view route is using the same ui-view as the parent tab. If that is the case and it is still not working, it's better for you to override the backbutton on the childs view to go to the parent.
Like this:
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicHistory) {
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
}
You can even replace the myGoBack() function with $state.go('parent-tab-view')
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;
})
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.