我有一个非常简单的应用程序,有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 回答
所以你应该能够改变你的
至
并遵循相同的逻辑
.state('offer-details', ...)
codepen.io