Ionic / Angular UI router History / Navigation stack: Back button missing sometimes

0
votes

We have an app which presents a folder structure using the Ionic's / Angular's navigation stack where each folder can contain detail objects which can be "opened" from there. If you now open a detail object which has tabs there is no back button available (which is a known limitation due to individual history stacks).

We now have the following problem with this: As resolution I created an own close / back button by overwriting the inoicHistory.backView with the object's previous folder view on each object's tab and then going back (ionigHistory.goBack() to that view) when closing the object's detail.

Unfortunately, sometimes the back button is just not visible anymore at some places of the navigation stack despite navigation stack/history is still available. You see no back button but you can go back with the HW back button. Then, if you're not on the root level you again see the back button. when you now go forth again to the same view the back button is missing again and you only can go back again with the HW back button where the back button is present again and so on.

Would be very happy on any advices or a resolution on this. It drives me crazy! Already spent very much time on this issue!

Thx & regards

2
cordovaangular-ui-routerionic

2 Answers

0
votes

I think I had got a lot of similar problems, I didn't find a perfect solution but I know how you can override this problem.

So when I get problems with the back button, I add a left button in the nav bar (not a nav-back-button but a nav-left-button) and I set his properties like a back-button: with an arrow-back icon, some css properties, and the behavior I want (with a directive or function in the controller or whatever I want).

My solution isn't the best but it's the only way I found to fix this bug quickly & easily. Let me know if you find a better solution!

0
votes

So am I, ''nav-left-button'' is quick-and-dirty. I really want to find a perfect solution! quote:"Let me know if you find a better solution!" :)

html:

<ion-nav-buttons side="left">
    <button  class="left-arrow" 
        ng-click="goRoot();" ng-if="!$ionicHistory.backTitle()">

    </button></ion-nav-buttons>

js: 

$scope.goRoot=function(){
    $ionicHistory.nextViewOptions({
  disableAnimate: true,
  disableBack: true,
  historyRoot:true
});
$state.go('root.shop');
 }