7
Tôi đang gặp sự cố khi sử dụng $ionicHistory trên các trang có sử dụng ion-tabs. Tôi sử dụng điều này để điều hướng đến chế độ xem trước đó (sử dụng goBack()). Khi tôi đặt các tab trong chế độ xem, lịch sử là sai, chế độ xem lại là hai chế độ xem trước đó.
Để chứng minh điều này tôi đã tạo một ứng dụng demo (plunker here) có 4 trang/lượt xem. Trang 1 -> Trang 2 -> Trang 3 -> Trang 4. Trang cuối cùng có các tab trên đó.
angular
.module("demoapp", ['ionic'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('first', {
url: '/',
controller: 'firstController',
templateUrl: 'first.html',
})
.state('second', {
url: '/second',
controller: 'secondController',
templateUrl: 'second.html',
})
.state('third', {
url: '/third',
controller: 'thirdController',
templateUrl: 'third.html',
})
.state('fourth', {
url: '/fourth',
controller: 'fourthController',
templateUrl: 'fourth.html',
});
$urlRouterProvider.otherwise("/");
}])
.factory("historyFactory", ['$ionicHistory', function($ionicHistory){
var show = function() {
var text = "";
var vh = $ionicHistory.viewHistory();
if(vh !== null) {
text += "VIEWS=" + JSON.stringify(vh.views);
text += "BACK=" + JSON.stringify(vh.backView);
}
return text;
}
return {
show : show,
}
}])
.controller("firstController", [
'$scope',
'$location',
function($scope, $location){
$scope.next = function() {
$location.path("/second");
};
}])
.controller("secondController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/third");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("thirdController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/fourth");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("fourthController", [
'$scope',
'$ionicHistory',
'historyFactory',
function($scope, $ionicHistory, historyFactory){
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}]);
Đây là cách nhìn với các tab trông giống như:
<ion-view>
<ion-tabs class="tabs-balanced">
<ion-tab title="Tab One">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 1</h1>
</ion-header-bar>
<ion-content class="has-header">
<h3>History</h3>
<p>{{data}}</p>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
Trên trang thứ hai, lịch sử xem trông như thế này:
Trên trang thứ ba, thêm một chế độ xem được thêm:
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
Nhưng trên trang thứ tư, với ion-tabs lịch sử xem vẫn giữ nguyên.
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
Đây có phải là một lỗi với $ionicHistory khi sử dụng ion-tabs hay tôi làm điều gì sai trong giao diện tab?
Tôi có nhiều hoặc ít vấn đề tương tự ở đây: http://stackoverflow.com/questions/28004332/ionic-tabs-and-side-menu-history. Bạn đã cố gắng để đặt trạng thái thứ tư bên trong thứ ba? '.state ('third.fourth') {...' và điều hướng ở đó '/ thứ ba/thứ tư' – Miquel