$ionicNavBarDelegate and navigation history

ionic-v1
1

Hi,
i’m having problems with navigation history.

I have a simple configuration of state provider:

.state('offerte', {
  resolve:{
      ...
  },
  url: "/offerte",
  templateUrl: "partials/serviziPubblici/offerte.html", 
  controller: "OfferteCtrl",

})
.state('contatti', {
  url: "/contatti",
  templateUrl: "partials/serviziPubblici/contatti.html", 
  controller: "ContattiCtrl",
})
.state('home', {
  url: "/",
  templateUrl: "partials/home.html",
  controller: 'HomeCtrl',
})

i’d like to have the back button of the navbar naming the last $state visited,
but $ionicNavBarDelegate.getPreviousTitle() doesn’t work.

I have a new <ion-nav-bar></ion-nav-bar>
inside <ion-view title="..."></ion-view> of every template, because i need to have a customized navbar only in the home so i couldn’t put a general navabar for every state.

Hope you can help me,
thank you!

edit:
another thing: i put a console.log() inside my $scope.getPreviouseTitle()
and i’ve nothice that it’s called 4/5 times. This happens even with the ionic template app.
and i didn’t understand why.

  <ion-nav-bar class="bar-balanced">
  <ion-nav-back-button class="button-icon">
    {{getPreviousTitle()}}
   </ion-nav-back-button>
<div class="buttons right-buttons">
2

Seems to work fine in this example.

3

The fact that it’s called 4/5 times is due to Angular’s digest cycle.

This is by design and isn’t something to be worried about unless performance degrades.

4

yes but i don’t have a “menu” so i can’t do master.something and master.somethingother

are history navigation bind only to master > child?

i thought it was a general thing.

5

No, it’s not tied to master>child.

You can do this .

6

First of all thank you!
The problem is i don’t have a unique navbar. I need to insert a new navbar in every template because i have to customize one of them.

My situation is like in the Alternative usage in http://ionicframework.com/docs/api/directive/ionNavBar/

i changed a bit this (dunno why right buttons don’t stay right)

7

Well what are you changing?

8

i thought i made myself clear.

instead of having one “master” <ion-nav-bar></ion-nav-bar> and than for each <ion-view></ion-view> adding only the navbar buttons like this:

 <ion-nav-bar class="nav-title-slide-ios7 bar-positive"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="main.html" type="text/ng-template">
 <ion-view title="Page One">
   <ion-nav-buttons side="right">
     <a ui-sref="second" class="button button-clear">
       Page Two
     </a>
   </ion-nav-buttons>
   
    <ion-content>
    <h1>Hello</h1>
      <h3>Page One</h3>
  </ion-content>
 </ion-view>
</script>

i need to have a navbar for every ion-view like this:

<script id="second.html" type="text/ng-template">
   <ion-view title="Page Two">
      <ion-nav-bar class="bar-positive">
           <ion-nav-back-button>
             <button class="button button-icon" ng-click="goBack()"><i class="icon ion-arrow-left-c"></i>  {{getPreviousTitle() || 'Back'}} </button>
          </ion-nav-back-button>
       </ion-nav-bar>
        <ion-content>
            <h1>Hello</h1>
            <h3>Page Two</h3>
       </ion-content>
 </ion-view>
</script>

in that way the navigation history doesn’t work, like i show you here,
i always have a back label
http://codepen.io/anon/pen/gaJEC1

9

But why do you need a nav bar for each view? What kind of customization are you doing that requires a new nav-bar each time?

Instead my don’t you use an ion-header-bar?

10

So in the end, i understood. What i needed was organize my routing differently.

Having one Main with no ion-nav-bar instead a ion-header-bar
and one ion-nav-bar for every starting point from Main childs.

.state(‘main’, {})
.state(‘contacts’ {abstract : true}, templateUrl:“navbar.html”)
.state(‘contacts.home’ {}).state('contacts.detail, {})

and so on.
Thank you for your patience.

1 Like