首页 文章

Ionic,后退按钮在选项卡中的列表详细信息上消失(历史记录为空)

提问于
浏览
0

我有一个非常简单的应用程序,有2个选项卡,每个选项卡包含一个列表,每个列表项都有详细视图它基于离子提供的默认选项卡模板 . 我的问题是列表项的详细视图上的“后退”按钮有时会消失 .

index.html的:

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

tabs.html:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <ion-tab title="Offers-tab" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/offers">
  <ion-nav-view name="tab-offers"></ion-nav-view>
</ion-tab>
<ion-tab title="Shops-tab" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/shops">
  <ion-nav-view name="tab-shops"></ion-nav-view>
  </ion-tab>
</ion-tabs>

app.js配置方法:

.config(function($stateProvider, $urlRouterProvider)
{
  $stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('tab.offers',
  {
    url: '/offers',
    views:
    {
      'tab-offers':
      {
        templateUrl: 'templates/tab-offers.html',
        controller: 'OffersCtrl'
      }
    }
  })
  .state('tab.offer-details',
  {
    url: '/offers/:offerID',
    views:
    {
      'tab-offers':
      {
        templateUrl: 'templates/offer-details.html',
        controller: 'OfferDetailsCtrl'
      }
    }
  })
  .state('tab.shops',
  {
    url: '/shops',
    views:
    {
      'tab-shops':
      {
        templateUrl: 'templates/tab-shops.html',
        controller: 'ShopsCtrl'
      }
    }
  })
  .state('tab.shop-details',
  {
    url: '/shops/:shopid',
    views:
    {
      'tab-shops':
      {
        templateUrl: 'templates/shop-details.html',
        controller: 'ShopDetailsCtrl'
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/offers');

});

services.js:

angular.module('starter.services', [])

.factory('Offers', function()
{
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var offers =
  [ { id: 0
     ,title: "Offer #0"
     ,description: "I'm the offer's description"
    }
  ];

  return {
    all: function()
    {
      return offers;
    }
   ,get: function(offerID)
    {
      console.log("offerID:" + offerID);
      for (var i = 0; i < offers.length; i++)
      {
        if (offers[i].id === parseInt(offerID))
        {
          return offers[i];
        }
      }
      return null;
    }
  };
})

.factory('Shops', function()
{
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var shops =
  [ { id: 0
     ,title: "Shop #0"
     ,description: "I'm the shop's description"
    }
  ];

  return {
    all: function()
    {
      return shops;
    }
   ,get: function(shopid)
    {
      for (var i = 0; i < shops.length; i++)
      {
        if (shops[i].id === parseInt(shopid))
        {
          return shops[i];
        }
      }
      return null;
    }
  };
});

controller.js:

angular.module('starter.controllers', [])

.controller('OffersCtrl', function($scope, Offers) {
  $scope.offers = Offers.all();
})

.controller('OfferDetailsCtrl', function($scope, $stateParams, Offers) {
  $scope.offer = Offers.get($stateParams.offerID);
})

.controller('ShopsCtrl', function($scope, Shops){
  $scope.shops = Shops.all();
})

.controller('ShopDetailsCtrl', function($scope, $stateParams, Shops) {
  $scope.shop = Shops.get($stateParams.shopid);
});

要重现“后退按钮消失”行为:

  • 点击"offers"标签上列表中的"offer #0"项 . 显示"offer details",带有后退按钮

  • 切换到"shops"选项卡

  • 点击"shop #0"项目 . 显示"shop details"视图 . 现在使用后退按钮返回"shops"视图

  • 切换到"offers"选项卡,其中"offer details"视图仍处于打开状态 . 点击"back button"

  • 现在再次切换到"shops"标签,点击"shop #0"项目打开商店详细信息视图:没有后退按钮了

当我检查$ ionicHistory backView()方法时,我得到一个null(这解释了为什么后退按钮消失了,但我似乎无法弄清楚为什么我得到一个null ...)

我是一个完整的新手,所以请原谅我,如果我的问题不清楚或我的代码是错误的,但我真的很感激任何关于我在这里做错的建议 .

1 回答

  • 0

    所以你应该能够改变你的

    .state('tab.shop-details', {
        url: '/shops/:shopid',
        views: {
         'tab-shops': {
           templateUrl: 'templates/shop-details.html',
           controller: 'ShopDetailsCtrl'
         }
       }
    })
    

    .state('tab.shops.details', {
        url: '/shops/:shopid',
        views: {
         'tab-shops@tab': {
           templateUrl: 'templates/shop-details.html',
           controller: 'ShopDetailsCtrl'
         }
       }
    })
    

    并遵循相同的逻辑 .state('offer-details', ...)

    codepen.io

相关问题