i'm using Onsen (v1.3.12) and Angular to develop my cross-platform app.
I added a button to go back to the home page of the app, so if users make some pop or some push of pages, when they hit on "Home" button they go back to initial page.
I use the following code:
$rootScope.myNavigator.resetToPage('homepage.html');
but it doesn't show the animation effect of "popping page" that is visible with pushPage method.
To get this effect i have to use the following code:
$rootScope.myNavigator.pages.length = 1;
$rootScope.myNavigator.pushPage('splash.html');
$timeout(function() {
$rootScope.myNavigator.pages.length = 0;
});
Isn't the default behaviour of resetPage method weird? Why it doesn't show the "pop" effect?
I solved using animation option:
$rootScope.myNavigator.resetToPage('splash.html', {animation: 'slide'});
The weird thing is that pushPage, popPage and resetPage methods have default animation option set to slide. The same doesn't happen for resetPage method.
Maybe is a Onsen bug.
Related
I am using the angular-ui-swiper and I want to set the active slide depending on the URL-Parameter. I have an angular controller, where the data is loaded for the swiper. This works fine, the buttons are working (prev, next). I call the method slideTo to set the activeslider after link click in the navigation. But it is not working if I load the page with the special parameter. The swiper-instance is not defined. So I have to call the correct page lifecycle event. I used the load, init-events, an equivalent to document ready, but without any success. It is only working if I put my setActiveSlide-Method to the scroll-event :D
Do you have any idea?
Thanks in advance
Maybe you need to make the set the activeslider in this kind of block:
angular.element(document).ready(function () {
//code here
});
Can you make a jsfiddle so we can see your code?
For our company we have a lot of devices rolled out with Mobicontrol Soti. This allows us to lock the device in something called a kiosk mode which disables the use of the homescreen and provides a custom screen that only have a set off apps we can decide.
One of the provided apps is a Ionic app that opens links in a browser (Soti Surf) but this gives 2 problems.
code
HTML:
<div (click)="$ctrl.doTheThing()"> something </div>
JS:
private doTheThing() {
this.inAppBrowser.create('surfs://' + url.replace(/^(https?:|)\/\//, ''), '_system');
}
First issue
First of all when I use the android back button the click doesn't seem to work anymore (I've put an alert in the first line of the doTheThing function, but nothings shows up).
Other buttons in the app seem to work just fine, when using the switch app button it also works
I tried:
preventDefault()
stopPropagation()
using the tappable attribute
(tap) instead of (click)
but none seem to work. Does anybody have an idea for fixing this?
Second issue
Note: this is less important
When opening a link it remembers the last page(in soti surf) so by using the back arrow it first navigates to the last link and when it has no more back locations it goes back to the app
I tried:
using the return value of the inAppBrowser.create() and calling close() when returning to my app
Version info
#ionic-native/core version: 4.16.0
cordova-android: 7.1.4
cordova -v: 8.1.2 (cordova-lib#8.1.1)
npm -v: 6.4.1
ionic: 4.12.0
nodeJS: 11.1.0
Here in ionic you can prevent device back button by using Navbar Class and using Lifecycle hook method
Here is a sample
ionViewDidLoad() {
this.navBar.backButtonClick = (e: UIEvent) => {
// todo something
if (condition )
{
this.getSaveDialog();
} else{
this.navCtrl.pop();
}
})
}
For opening In Appbrowser in your app, will lose control of your events, you can't track and manage the
state of pages.
It can be maintain by browser. you need to place hacks or alternative in your application which is opening in APP
My main issue is the following. I'm redirecting a page using the router in an AngularJS application to a Angular application. This works fine but when trying to go back to the page you came from you'll have to click the back button twice because when on a page going to a route, you load to route itself and then you redirect.
Example: you're on page A (AngularJS), you go to page B (AngularJS route) which redirects to C (Angular application).
When on page C you use the back button and as a user you expect to go back to page A but instead you go to page B and are redirected again to C.
Right now I think about detecting if the back button was clicked and the going back in the history with
window.history.go(-2)
Going back in the history works and I found a lot of questions and answers on SO to detect clicking the back button. But these ways of detecting the back button do not work when your origin is an AngularJS application and your code is in your Angular application.
Any idea how to detect the back button when your previous page was not the same application?
For now I came up with this solution.
In the routing of my AngularJS app I used:
redirectTo: function(routeParams) {
window.location = 'http://externalpathtoAngularApp';
}
and then in the Angular app in the controller of the page that is redirected to I added the following to the constructor of my class
if (document.referrer === 'http://originOfAngularJSApp') {
window.onpopstate = function () {
console.log(document.referrer);
};
history.pushState({}, '');
}
and also add this HostListener in the class after the constructor
#HostListener('window:popstate', ['$event'])
onPopState(event) {
if (document.referrer === 'http://originOfAngularJSApp') {
window.history.go(-2);
}
}
This is somewhat satisfying but it doesn't cover all the scenario's yet. For example if you come from app A and are redirected to C, then it goes back to A is expected.
But if you come from A redirected to C and then go to D, F... (in the Angular app) and then go back to C using the back button and finally using the back button to go to A you will be redirected to C again.
So in this case it's not completely covered yet.
I have an ionic app that has a search template that has a form where you can query posts by keyword. I also have a service that returns the post(s) as a list on another view. All that is working well.
My search controller upon submitting the search form uses:
$state.go('app.search.results', {'searchId': hash});
so that I can have a unique url for that search. I needed this unique url to implement 'back' functionality so that if a user clicks on one of the posts in the list, after viewing the post if they decide to click back, they would get to see the results of the search still (by default they would be returned to the search form without any results anymore).
To allow for a back to search results I implemented a custom back button function and put it on the ionic back button element like this:
<ion-nav-back-button ng-click="goBack()">
and then setup a the custom function:
$scope.goBack = function() {
$window.history.back();
}
All of this works well, I can go back to search results and see them, essentially very much like normal browser back functionality.
Problem for me is that when I have gone all the way 'back' via the back button, my initial state contains the 'Back' button and clicking it does not go anywhere and the 'Back' button still shows. Ionic does pretty good about hiding the back button when it shouldn't be there but in this case not so. Any ideas for how to check when history is exhausted and hiding the back button conditionally would be appreciated.
EDIT:
Here is a jsFiddle ; Note: open fiddle in a new, separate tab to see back button issue. FYI Search is in the menu.
One of the few qualms I have with Ionic is their "smart" navigation. I have run into a lot of problems with this myself. My solution was to create a back button of my own, this back button stores previous states and their params so you can go back and not lose search results for example with your scenario.
This component gives you both a back button and breadcrumbs to use (or you can just use back button)
It is open source and feel free to use it!
jscBreadcrumbs
Strange Milk - Breadcrumbs Post
Here is your jsFiddle with the jscBreadcrumbs implemented and working:
jsFiddle
jscbreadcrumbs
You use $window.history.back(), I think you should use $ionicHistory.goBack(); instead. It can control the history and view and state in the ionic way.
I'm working on an Ionic app that has a "preloader" immediately before the app starts. Ideally I'd like the main page after the pre-loader to appear immediately, instead of slide-in. Is there a way to programmatically define what transition to use on a one-off basis? Normally the sliding is fine, but just not for the transition from the pre-loader to the main menu.
Defining in controller $ionicViewSwitcher and $state
now in ng-click inside a or button tags call:
//here transition name
$ionicViewSwitcher.nextDirection('forward');
//here next state name
$state.go("main.map");
angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider){
$ionicConfigProvider.views.transition('none');
});
Hope this helps you.