CODEWITHSUNDEEP
navigationionic-framework
redrom
redrom

Reputation: 11642

Ionic back button in header is not displayed after redirect

I have a problem with displaying of the back button in my app.

I redirect to the new page using this:

<button class="button button-full button-positive" ui-sref="tab.dash" >
            Full Width Block Button
        </button>

After the redirect on the second page is no back arrow icon in header displayed.

Here is the content body tag in the index.html 

<body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view>

    </ion-nav-view>
  </body>

Content of the second template where im redirecting.

<ion-view title="Charts - days">
  <ion-content class="padding">
    <h1>test</h1>
      <div class="row" on-touch="alert('right');">
          <div class="col" on-touch="alert('right');" style="background-color: red;">.col</div>
      </div>
      <button on-touch="alert('touch');" class="button">Test</button>

  </ion-content>
</ion-view>

Could somebody please tell me what I'm doing wrong?

Upvotes: 2

Views: 4177

Answers (1)

Surya prakash chaturvedi
Surya prakash chaturvedi

Reputation: 129

You can do it with two ways... 1- go to your App.js file and add the state like --

   .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

now if you want to add new state and back button shows automatically then- 

.state('app.single', {
    url: '/playlists/1',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });

in this case you dont need to write code for geting back button just in menu.html check this is available or not ?

  <ion-nav-back-button>
  </ion-nav-back-button>

this will maintain history stack automatically and this is recommended.

2-the second way is by writing the manual code - $ionicHistory ,$scope -- inject this to your Controller and then add this

$scope.GoBack = function () {
        $ionicHistory.goBack();
    }

now in your HTML page write this after starting of ion-content

<ion-content>

        <div class="bar bar-header bar-calm">
            <button class="button ion-chevron-left" ng-click="GoBack()"></button>
            <h6 class="title">Security Settings</h6>
        </div>
 </ion-content>

Upvotes: 1

Related Questions