5

I'm trying to use $state.go to switch between tabs in an Ionic (+AngularJS UI Router) application, but I can't make it work with a sub-sub-state (state.substate.subsubstate). It actually works fine when moving to a sub-state (state.substate).

Here's what I mean: http://codepen.io/anon/pen/Jykmi?editors=101
Pressing the "Tab2" button neither works nor throws an error. Nonetheless, replacing the ng-click="goToState('tabs.tab2.home1')" (in line 25) with ui-sref="tabs.tab2.home1" or href="#/tabs/tab2/home1", works perfectly. Here's an example: http://codepen.io/anon/pen/DIxhC?editors=101

Even using ng-click="goToState('tabs.tab2')" would work, though that's not the intended target state.

I've found other similar questions (like this and this) but I don't think they had the same problem.

Does anybody know if $state.go should work with 3rd-level nested states?. Is the problem in my code?.

Thanks a lot in advance.
Regards,
  Rafa.

Community
  • 1
  • 1
rbarriuso
  • 787
  • 8
  • 30
  • There's some discussion still going on in the ionic forum: http://forum.ionicframework.com/t/bug-in-tabbar-with-nested-states/791/ – rbarriuso Aug 19 '14 at 20:09
  • This seems to be a bug AFAIK. I've also found that transition to "child" states doesn't 100% always work properly, either. – dmackerman Oct 04 '14 at 13:27

2 Answers2

1

As ui-sref="tabs.tab2.home1" internally use $state.go and as you said ui-sref="tabs.tab2.home1" works.

My answer is yes : $state.go() should work with 3rd-level nested states.

I actually use it in my own projet with no problems (but without ionic tabs)

Okazari
  • 4,597
  • 1
  • 15
  • 27
1

I am sorry I don't have enough reputations to add a comment.

I got the exactly same problem as you do: href or ui-sref works fine while ng-click with $state.go has no effect(the address in browser changed correctly but the view remains unredirected). I solved this problem by simply use them both at the same time:

In html:

ui-sref="tabs.tabs2.home" + ng-click="goHome()"

or

href="#/tabs/tabs2/home" + ng-click="goHome()"

In controller js:

$scope.goHome = function(){
    $state.go('tabs.tabs2.home');
    // or, location.path works fine too:
    // $location.path('/tabs/tabs2/home');
}

I don't know the reason, so this is only a workaround

vdonkey
  • 106
  • 10