$state.go not working with 3rd-level nested state (using Ionic tabs / AngularUI)

Question

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.

There's some discussion still going on in the ionic forum: forum.ionicframework.com/t/bug-in-tabbar-with-nested-states/791 — rbarriuso
– rbarriuso, Commented Aug 19, 2014 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
– dmackerman, Commented Oct 4, 2014 at 13:27

Okazari · Accepted Answer · 2016-03-07 09:21:16Z

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)

edited Mar 7, 2016 at 9:21

answered May 26, 2015 at 14:48

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vdonkey · Accepted Answer · 2016-10-18 13:25:57Z

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

edited Oct 18, 2016 at 13:25

answered Oct 18, 2016 at 8:36

vdonkey

10610 bronze badges

Collectives™ on Stack Overflow

$state.go not working with 3rd-level nested state (using Ionic tabs / AngularUI)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related