Ionic-framework: Back button issue

[kotyara85]

Short description of the problem:

Back button becomes hidden, looks like some problems with ionicHistory

What behavior are you expecting?

Click on the button should change state to previous

Steps to reproduce:

1. You need at least two tabs. where you have "sub pages"
2. Click on first tab, then subpage and click back
3. Do the same with second tab
4. Go to first tab
5. The same with second tab
6. Repeat #2
7. No back button on sub page on tab 2 & 1

Attached images

Which Ionic Version? 1.x or 2.x
1.3.1

[kotyara85]

So confirmed, the problem with backView:
This code answer viewHistory before actions:

Object
backView: View {viewId: "ion9", index: 0, historyId: "ion5", backViewId: "ion7", forwardViewId: "ion10", …}
currentView: View {viewId: "ion10", index: 1, historyId: "ion5", backViewId: "ion9", forwardViewId: null, …}
forwardView: null
histories: {root: Object, ion3: Object, ion4: Object, ion5: Object}
views: {ion2: View, ion6: View, ion7: View, ion8: View, ion9: View, …}

After:

backView: null
currentView: View {viewId: "ion10", index: 1, historyId: "ion5", backViewId: null, forwardViewId: null, …}
forwardView: null
histories: {root: Object, ion3: Object, ion4: Object, ion5: Object}
views: {ion2: View, ion6: View, ion7: View, ion8: View, ion9: View, …}

[chmln]

+1

[LightZam]

+1

[LightZam]

any solution?
or anyone has workaround solution?
or anyone can confirm which version work fine

[kotyara85]

I fixed this way, I keep history in $rootScope.appScope.viewBack

$scope.$on("$ionicView.beforeEnter", function(event, viewData){
viewData.enableBack = true;
if($ionicHistory.backView() != null) {
$rootScope.appScope.viewBack[$state.current.name] = $ionicHistory.backView();
}
else if(typeof $rootScope.appScope.viewBack[$state.current.name] != undefined) {
$ionicHistory.viewHistory().backView = $rootScope.appScope.viewBack[$state.current.name];
}
});

Works perfectly for me

[LightZam]

@kraskoshnyy thanks, i will try it

and more , i had confirm the version.

ionic lib 1.3.0 works fine, the bug comes out with 1.3.1

[gzfgeh]

what is this "appScope"? Cannot read property 'viewBack' of undefined

[Focushift]

Have same problem with Back button when navigating between 3 views. If I check $ionicHistory.viewHistory().currentView when coming from 3 to 2 view, backView becomes null.
Here my ugly code that helps to solve problem and later adds another:
$rootScope.$on('$stateChangeSuccess', function () {
if ($ionicHistory.viewHistory().currentView.stateId == 'garage' || $ionicHistory.viewHistory().currentView.stateId == 'login') {
var s = {};
s.back = $ionicHistory.viewHistory().currentView;
s.view = $ionicHistory.viewHistory().views[s.back.viewId];
StoreService.storeData('apphistory', s);
}
if ($ionicHistory.viewHistory().histories.ion1.cursor > 0) {
setTimeout(function () {
console.log(angular.copy($ionicHistory.viewHistory()));
if ($ionicHistory.viewHistory().currentView.index == 0) {
try {
angular.element(document.querySelectorAll("[nav-bar]")[0].childNodes[0].childNodes[0]).addClass('hide');
angular.element(document.querySelectorAll("[nav-bar]")[0].childNodes[1].childNodes[0]).addClass('hide');
} catch (e) { }
}
if ($ionicHistory.viewHistory().backView == null && $ionicHistory.viewHistory().histories.ion1.cursor > 1) {
console.log('alert');
var s = angular.copy(StoreService.getData('apphistory'));
$ionicHistory.viewHistory().backView = s.back;
$ionicHistory.viewHistory().views[s.back.viewId] = s.view;
$ionicHistory.viewHistory().currentView.backViewId = s.back.viewId;
$ionicHistory.viewHistory().views[$ionicHistory.viewHistory().currentView.viewId].backViewId = s.back.viewId;
var ar = angular.copy($ionicHistory.viewHistory().histories.ion1.stack);
$ionicHistory.viewHistory().histories.ion1.stack = [];
$ionicHistory.viewHistory().histories.ion1.stack.push(s.back);
$ionicHistory.viewHistory().histories.ion1.stack.push(ar[0]);
$ionicHistory.viewHistory().histories.ion1.cursor--;
console.log($ionicHistory.viewHistory());
angular.element(document.querySelectorAll("[nav-bar='active']")[0].childNodes[0].childNodes[0]).removeClass('hide');
}
}, 300);
} else setTimeout(function () { console.log(angular.copy($ionicHistory.viewHistory())); }, 300);
});

[SwenVogel]

Hi,

in my opinion this bug is really a show stopper. And the ionic team should investigate ASAP.

[loopezz]

+1

[oguzserdar]

+1

[jpost]

+1, and I can confirm the bug does not appear in 1.3.0, at least for me.

I think I found the bug in the code. This block was added around line 54054 in ionic.bundle.js. It appears to have been added to fix some other bug, but introduced this bug.

// the new view is being removed from it's old position in the history and being placed at the top,
// so we need to update any views that reference it as a backview, otherwise there will be infinitely loops
var viewIds = Object.keys(viewHistory.views);
    viewIds.forEach(function(viewId) {
    var view = viewHistory.views[viewId];
    if ( view.backViewId === switchToView.viewId ) {
      view.backViewId = null;
    }
});

[Focushift]

Commented that block, not helps.

[SwenVogel]

Hi, does anybody know whether there is some progress on this bug?
Ionic 1.3.2 is out, can anybody confirm wheteher this bug still exists?

[AlDrag]

Has this still not been fixed? I am still having massive issues with this. Is it fixed in V2 at least?

[oguzserdar]

It's not a problem in V2.

[SwenVogel]

Personally, I'm a little bit disappointed. I understand that the Ionic dev team is primarily focused
on the v2 release, but v2 is still not ready for production use. Therefore I can not understand
that this primary navigation BUG ist still not resolved and that since two v1 releases!

[AlDrag]

I agree DrJonnie. But maybe we can try contribute to helping the problem through a pull request? :) Just need to find the cause of the bug.

[gabrielbazan7]

Just send a PR to Bitpay/Copay Wallet ionic project solving this issue. Feel free to take a look: https://github.com/bitpay/copay/pull/5333
And tell me if it works on your proyect, please.

Here is the code.

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
 if (!$rootScope.viewBack) $rootScope.viewBack = {};
 if ($ionicHistory.viewHistory() && $ionicHistory.viewHistory().backView != null)
   $rootScope.viewBack[fromState.name] = $ionicHistory.viewHistory().backView;
});

Then, in each view (I do it once because I have a TabController that contains all tabs views - although viewData.enableBack = true needs to be done in each controller, I cannot get this solved):

$scope.$on("$ionicView.beforeEnter", function(event, viewData) {
  if ($ionicHistory.viewHistory() && !$ionicHistory.viewHistory().backView) {
    $ionicHistory.viewHistory().backView = $rootScope.viewBack[data.stateName];
    viewData.enableBack = true;
 }
});

[jgw96]

This issue was moved to driftyco/ionic-v1#122

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.