0

I have issue is my back button is not showing in detail page, after navigating it from tab. I have my states like

$stateProvider
            .state('poets', {abstract: true, url: '/poets', templateUrl: 'views/poets/index.html'})
            .state('poets.list', {url: '/poet-list', views: {'poets-list': {templateUrl: 'views/poets/poet.list.html', controller: 'PoetCtrl'}}})
            .state('poets.popular', {url: '/poet-popular', views: {'poets-popular': {templateUrl: 'views/poets/poet.popular.html', controller: 'PoetPopularCtrl'}}})
            .state('poets-detail', {url: '/poets/detail/:itemId',  templateUrl: 'views/poets/detail.html', controller: 'PoetDetailCtrl'})

'poets.popular' & 'poets.popular' are two tabs both are navigating to detail page. I would like to add back button on my detail page so that, it navigate back to the previous state.

index.html

<ion-view>
<ion-tabs class="tabs-striped tabs-color-balanced tabs-icon-left">
    <ion-tab icon="ion-home" title="All Poets" href="#/poets/poet-list">
        <ion-nav-view name="poets-list"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-home" title="Popular" href="#/poets/poet-popular">
        <ion-nav-view name="poets-popular"></ion-nav-view>
    </ion-tab>

</ion-tabs>
</ion-view>

poet.list.html or poet.popular.html are almost same, I have written single as.

<ion-view title="Poets">

<ion-nav-buttons side="primary">
    <button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>

<ion-nav-buttons side="right">
    <button ng-click="popover.show($event)" class="button button-icon"><i class="icon ion-more"></i></button>
</ion-nav-buttons>

<ion-content>
    <ion-list>
        <ion-item href="#/poets/detail/{{item.id}}" class="item-icon-right item item-text-wrap"
                  ng-repeat="item in data" type="item-link">
            <h2>{{item.name}}</h2>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>

    <ion-infinite-scroll ng-if="!end" on-infinite="fetchMore()"></ion-infinite-scroll>
</ion-content>
</ion-view>

detail.html

<ion-view view-title="{{data.name}}">
    <ion-nav-bar class="bar bar-balanced">
        <ion-nav-back-button class="button-clear"><i class="ion-arrow-left-a"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-buttons side="primary">
        <button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
    </ion-nav-buttons>

    <ion-content>
     ....
    </ion-content>
</ion-view>
Sankalp
  • 1,300
  • 5
  • 28
  • 52
  • Your code is confusing. You are using menu toggle button as well as back button on detail page. And you are calling detail page as child, while if you see your route `.state('poets-detail'`, i dont see it getting any parents. – Mudasser Ajaz Sep 16 '15 at 14:44
  • you will have to put back button manually with this routing, in – Mudasser Ajaz Sep 16 '15 at 14:46
  • Can you please give example. I have tried few iterations with above logic. I havn't put `detail` as child because either `list or popular` both have common child `detail` – Sankalp Sep 17 '15 at 04:43
  • first clean your code,no one can help you with this code, see this example for tabs structure http://codepen.io/ionic/pen/odqCz – Mudasser Ajaz Sep 17 '15 at 05:22
  • try to put this code in the controller of the page that back button is hidden in it $scope.$on('$ionicView.beforeEnter', function(event, viewData) { viewData.enableBack = true; }); – Anas Omar Sep 17 '15 at 13:50

0 Answers0