Ionic $state.go not working on device

Question

I'm currently working on an app, build using Ionic. My problem is that $state.go is only working in the browser but not on the phone. This seem to be a common problem, but after reading a lot of answers to the same questions, I still can't figure out how to fix it.

The general fix seems to be to ensure you're using relative URLs as explained here: Using Angular UI-Router with Phonegap but I still can't get it to work. What am I missing?

Link to plunker: http://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8?p=preview

App.js structure:

    ....
    $stateProvider
      .state('parent', {
      url: "/",
      templateUrl: "parent.html"
    })
    .state('parent.child', {
      url: "child",
      templateUrl: "child.html"
    })
    $urlRouterProvider.otherwise("/")
    })
    ....

I updated the plunker so that $state.go is in a function for 'menu 1'. When testing it on the device it only appears after swiping either op or down, after clicking the menu. So the scenario is this, I click menu 1 - nothing happens - swipe either up or down and then the view appears. I tested it on the mobile using Ionic View — kandersen, May 29 '15 at 13:20

score 0 · Answer 1 · answered May 29 '15 at 13:37

0

For state.go to work you have to inject $state dependency to your controller

app.controller('ParentCtrl', ['$scope', '$state', function($scope, $state) {
  $scope.$state = $state
}]);

app.controller('MenuCtrl', ['$scope', '$state', function($scope, $state){

    $scope.goTo = function(){
        $state.go('menu.kategorier');
    }

}]);

and you have to register the state you want to goto in $stateProvider

$stateProvider
.state('menu.kategorier', {...})

and to get to that state you have to go from parent state like 'menu' in this case. you cannot change state from 'parent' to 'menu.kategorier' but you can goto 'parent.child' from 'parent'

answered May 29 '15 at 13:37

Gurbakhshish Singh

1,034
1
10
25

the 'menu.kategorier' is a copy paste error. As this is what I'm using when testing it on the device. To make it simpler in the plunker I used parent.child. So when testing it I was using the correct $stateProvider. – kandersen May 30 '15 at 10:04
Forgot to add that, correcting the $state dependency in the controller doesn't seem to fix the issue, where I'll have to swipe after clicking the menu to have the view appear. – kandersen May 30 '15 at 10:11

score 0 · Answer 2 · answered May 30 '15 at 19:19

I solved it by changing my setup for the nested views, based on this example: http://codepen.io/mhartington/pen/Bicmo

Here is my plunker, for those who are interested:

Plunker: http://plnkr.co/edit/2m5bljMntpq4P2ccLrPD?p=preview

app.js structure:

    $stateProvider
      .state('eventmenu', {
      url: "/event",
      abstract: true,
      template: "<ion-nav-view name='menuContent'></ion-nav-view>"
      })

      .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
     })

     .state('eventmenu.home.home1', {
     url: "/home1",
     views: {
       'inception' :{
         templateUrl: "home1.html"
       }
     }
    })

Ionic $state.go not working on device

2 Answers2