AngularJS的Ionic Framework中的子状态缺少后退按钮

时间:2015-09-16 13:22:50

标签: angularjs ionic-framework ionic-view

我有问题是我的后退按钮在从标签导航后没有在详细页面中显示。我有像

这样的州
$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'两个标签都导航到详细信息页面。我想在我的详细信息页面上添加后退按钮,以便导航回到之前的状态。

的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或poet.popular.html 几乎相同,我写过单曲为。

<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>

0 个答案:

没有答案