Ionic/AngularJS. Redirect to another tab

Question

I have created a basic app with tabs. I have two tabs in my app, NEW and DISPLAY.

When I'm in the NEW tab, I redirect to an item in the DISPLAY tab: #/tab/display/1

Then when I click DISPLAY tab, or if I click NEW tab and then DISPLAY tab again, that same item page is shown - and the DISPLAY tab is using the DisplayItemCtrl instead of DisplayCtrl. With other words, I cannot get back to the original DISPLAY page (#/tab/display).

Is there a way to clear the history or some other way to fix this?

If I first visit the DISPLAY tab page before I go to the NEW tab page to create an item, it works, as if the route is cached, but if I don't visit the DISPLAY page when I start the app and create a new item, it will not work.

These are my states:

.state('tab.new', {
  url: '/new',
  views: {
    'tab-new': {
      templateUrl: 'templates/tab-new.html',
      controller: 'NewCtrl'
    }
  }
})

.state('tab.display', {
  url: '/display',
  views: {
    'tab-display': {
      templateUrl: 'templates/tab-display.html',
      controller: 'DisplayCtrl'
    }
  }
})

.state('tab.display-item', {
  url: '/display/:id',
  views: {
    'tab-display': {
      templateUrl: 'templates/display-item.html',
      controller: 'DisplayItemCtrl'
    }
  }
})

I created a simple tabs app on codepen just to show the problem. http://codepen.io/anon/pen/GInjq First go to Dash, and click "Redirect to a friend". After that it will be impossible to reach the Friends tab start page.

score 1 · Answer 1 · edited May 23 '17 at 11:53

This is an old post, but I still found a workaround, if someone has this issue look at my question.

Consists in putting ng-click="onTabSelected()" in the tab, and in the controller assigned to the tabs:

$scope.onTabSelected = function () {
    $state.go("tab.home");
}

That way, always the tab is touched it will lead to the state I want, not the first shown or whatever, I hope it's useful for someone, the behaviour that gave the problem really looks like a bug in ionic.

score 0 · Answer 2 · answered Jul 09 '14 at 00:32

0

Did you try state redirection from your tab?

For ex:

<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tab.display"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab>

answered Jul 09 '14 at 00:32

Saravanan S

1,021
1
10
24

Tried it now, and it makes no difference. – user1121487 Jul 09 '14 at 08:36

score 0 · Answer 3 · answered Jul 10 '14 at 04:47

0

see documentation

http://ionicframework.com/docs/api/directive/ionTab/

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

create a function, onTabSelected that is called when the tab is clicked so that the ui-router doesnt manage it

answered Jul 10 '14 at 04:47

Aaron Saunders

33,180
5
60
80

Still not working. Created $rootScope.onTabSelected function in both DisplayCtrl and DisplayItemCtrl and used $state.go('tab.display'), but if I go to 'tab.display' the #/tab/display/1 route is still used since this page been visited before the #/tab/display route. – user1121487 Jul 10 '14 at 09:14

Ionic/AngularJS. Redirect to another tab

3 Answers3