Overriding the back button handler


#1

I have the following code in index.html:

<body ng-app="starter">
<!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar>
  <ion-nav-back-button class="button-dark"/>
  </ion-nav-bar>

  <!-- where the initial view template will be rendered -->
  <ion-nav-view> <ion-view>
     <ion-content>Hello!</ion-content>
  </ion-view> </ion-nav-view>

Because of this a back button appears on every view. On one of the view, I want to override the back button logic i.e I want to prompt the user asking whether he wants to really go back. How do I achieve this?

Thanks.


#2

http://ionicframework.com/docs/api/service/$ionicPlatform/

there is a registerBackButtonAction-Function to achieve this.

In the controller to that view --> register a backbuttonaction with priority 100.
use event.preventDefault do prevent default back-action.

Show popup --> if user wants to go back --> call $ionicHistory.back(); and remove registered BackButtonAction!


#3

The documentation says it is for the “hardware” back button. Not my back button in the header.


#4

oh okay sry, then i misunderstood you.

you can add the ionNavBackButton an own ngClick function --> there you can check the current state --> if it is not the special handling --> show Popup and in all other cases call $ionicHistory.goBack()


#5

How do I know in the function if I am on the ‘special’ page?

Should I put the ngclick handler in $rootScope?


#6

You need a base controller that wraps the whole app-content
there you can define the click-action.

The uiRouter-Module (included in ionic) provides the $state-Service.
With that you can easily get the current state name.


#7

Tried it doesn’t work. The suggestions are too vague for a beginner like me. The problem I am facing is a simple problem and ionic seems to not have solutions for simple problems it seems. I have seen similar posts by others an there are no solutions.

Thanks anyway.


#8

the problem is… that the solutions provided by ionic are simple… if you are in angular before.

So if you want to write an app with angularjs and without no javacript know how… there are no simple solutions.
There are no simple solutions in all programming languages in that case^^.

If you want to build a software like with good old delphi with drag an drop, everything is colorful and clickable and you do not have to write a single line of code … maybe you should not program anything.

Every technology has there specials and tricks you have to dig into it and learn to work with them…

If you have no experiences maybe you should first build a little angularjs website and then make it work with ionic…
without special usecases like overwriting backbuttons and so on.

Simple and clean. Define a Baselayout with navbar and backbutton and you content.
Understand how ionic works.