In a tab based ionic 1.x app, I'd like to display a customized "goBackHome" button only when the <ion-nav-back-button> is not displayed.
How to detect is the <ion-nav-back-button> is displayed or not?
Here is the solution from here:
$rootScope.$on('$viewHistory.historyChange', function(e, data) {
$scope.isBackButtonShown = !!data.showBack;
});
Additionally, it might help:
App.js - custom text and icon. You can use $ionicConfigProvider.
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.backButton.previousTitleText(false).text('customText');
$ionicConfigProvider.backButton.icon('ion-ios-home');
})
Controller.js - force Ionic to display back button on certain page
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
Additionally resources:
Change/Hide ion-nav-back-button text
How can I change the back button title in ionic framework?
How to force Ionic display back button on certain page?
Ionic override all BACK button behaviour for specific controller
hiding back button in ionic, angularjs
Show side menu or back button conditionally
Hide with ng-hide/ng-show
Ionic - Conditionally Hiding Back Button
A working solution for the current Ionic release:
$rootScope.$on('$ionicView.beforeEnter', function(e, data) {
$scope.isBackButtonShown = data.enableBack;
});
Related
Is there any way or any framework or any particular ionic component to implement this below kind of feature.
Here is what I want:
When I open the component for first time the pop over automatically appears over a button ( like we have page tour in websites ). On click on GOT IT it will dismiss.
Use the popover component (https://ionicframework.com/docs/api/popover) with
ionViewDidEnter(){ }
As the popover is most of the time triggered by a click, you'll need to use javascript to "fake" a click :
ionViewDidEnter(){
let element: HTMLElement = document.getElementById('button') as HTMLElement;
element.click();
}
And then you create your onClick() method for your button to present the popover.
In ionic InAppBrowser, I want a custom close button after loading the webpage.
After closing the browser with that custom button it should give toast in the app with message 'Thank You For Visiting Our Website'.
const browser = this.iab.create('exampleurl.com', '_blank', 'location=no,zoom=no');
The button close can be only modified in the native part of the plugin.It cannot be modified in the java/html/css level.
browser.on('exit').subscribe(event => {
//use toastcontroller
});
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
I have this flow in my ionic app... login.html page(which is a "ion-view")->side-menu page(side-menu from ionic framework)->page2.html page(which is a "ion-view"). Now i want to implement "ion-nav-bar" with "ion-nav-back-button" in it. Normally when i want to go back from page2.html the app should sent me to side-menu page....instead, my app, sent me to login page. Seems like side-menu does not have "ion-view" in it and it is not recorded in app flow. Any suggestion how can i solve that ? thank you
There is no a state for side menu, you can not 'go back' to open side menu.
In the normal, for the login view, you should disable the state temporally. Then the app will not 'go back' to login view. You can do it like this:
$scope.doLogin = function () {
Auth.login($scope.loginData, function () {
console.log('login success');
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('home');
});
};
And you can also clear the view history of ionic to avoid going back with:
$ionicHistory.clearHistory();
$state.go('user.home');