Change variable of previous view before going back with $ionicHistory.goBack();

ionic-v1
1

Hi guys,

I would like to change a variable of the previous view before going back with $ionicHistory.goBack(); I have a ‘login’ view with a login form and a link to a ‘forgot password’ view. When the user clicks on the link, the ‘forgot password’ view opens and the back button shows up to go back to the ‘login’ view. When the user fills in his email address and submits the form to reset his password, I redirect back to the login view with $ionicHistory.goBack(). What I like to do, is to show a message above the login form that the user received a mail to reset his password. To show this message I would like to use ng-if=“showResetMessage” with a boolean. Before calling goBack() I would like to change this boolean to ‘true’.

Both views have their own ui-router states, templates and controllers. In the loginController a have a boolean called ‘showResetMessage’ and in the resetController I call the goBack() function and would like to change the boolean. Any ideas?

Thanks!
Mark

2

a simple codePen? or some code?

off hand, I wouldn’t do a go $ionicHistory.goBack() i would just go to that login state, but set the showResetMessage as a $stateParam to use to update the UI appropriately

1 Like
3

Hi @aaronksaunders,

I created a CodePen to give you an idea:
codepen.io/markbeekman/pen/XJgEzG

I’ve changed $ionicHistory.goBack() to $state.go(‘login’, { card: true }); and the ‘login’ view is showing the card with the message, but the problem with this is that the animation is not going back but forward. I would like to animate back like $ionicHistory.goBack() and then show the message. Any suggestions?

Thanks!
Mark

4

this might help? http://ionicframework.com/docs/nightly/api/directive/navDirection/

1 Like
5

Hi @aaronksaunders,

Thanks for the tip! It isn’t the final solution, but it made me think in another direction. Because I called $state.go(); from within a controller I could not use the directive to change the animation direction to ‘back’. After searching the internet I found another solution: $ionicViewSwitcher.nextDirection(‘back’); When you call this function right before the $state.go(); function, it manipulates the animation direction going back.

After resolving the animation direction issue. I needed to hide the back button in de nav bar, because Ionic still thinks the user moved forward. To accomplish this I used: $ionicNavBarDelegate.showBackButton(false); right after the $state.go(); function. From this moment I accomplished exactly what I wanted… I thought…

When the user start the app and clicks the ‘Forgot password’ button, he moves forward. He resets his password and will be redirected ‘back’ to the login view and the back button is invisible. When the user clicks on the ‘Forgot password’ button again, he moved back instead of forward, because I manipulated the direction of the animation before. To resolve this issue I changed the ‘Forgot password’ button ui-sref="" to an ng-click="" with the same functionality. First change $ionicViewSwitcher.nextDirection(‘forward’); and then call $state.go() and enable the back button again.

Check out my updated CodePen:
codepen.io/markbeekman/pen/XJgEzG

Thanks for your help!
Mark

1 Like
6

This is pretty awsome, that you found a solution! I am implementing a sample app that will need similar functionality, thanks for doing the heavy lifting for me. Glad I could be of some assistance.

7

I think you can set the state params for the previous view using $ionicHistory:

$ionicHistory.backView().stateParams = {card:true};
$ionicHistory.goBack();

I think that should work.

4 Likes
8

Hi @siebs,

Thanks for your tip! I tried to set the state params using $ionicHistory.backView().stateParams = {card:true}; and it works like a charm! Good to know this is possible. Check my new CodePen:
codepen.io/markbeekman/pen/GgvgbY (deleted, didn’t work great).

I only have the same problem, the view is animating forward instead of back. I think this is because the url of the ‘login’ view is different from the ‘login’ backView(), because there is a parameter in the address bar that first wasn’t there ?card=true. You don’t see this parameter on CodePen, but on my local app I see this is happening.

Maybe there is another way to send optional stateParams? Or should I ignore stateParams and use a global variable? Does anyone have a good suggestion? Thanks!

Good evening,
Mark

1 Like
9

Hi guys,

I did the trick using a service! Check out my CodePen:
codepen.io/markbeekman/pen/pvremv

Didn’t need to manipulate the back button (hide/show) or animation direction. Just used $ionicHistory.goBack(); and changed a variable in the LoginService. Works like a charm!

Good evening,
Mark

3 Likes
10

Thanks Siebs, this was helpful.

I added an additional piece for my full solution, and effectively eliminated the “back” button option after retreating to a previous view with $ionicHistory.goBack().

My solution is similar to below:

  $ionicHistory.nextViewOptions({
    disableBack: true
  });
  $ionicHistory.backView().stateParams = {card:true};
  $ionicViewSwitcher.nextDirection('back');
  $ionicHistory.goBack();`

Hope this can help someone else.