Using $state.go to navigate between views doesn't work, $location.path does

I have the following route definition in my project:

.state('lab-results', {url: '/lab-results', templateUrl: '...', controller: '...'})
.state('lab-details', {url: '/lab-details/:id', templateUrl: '...', controller: '...'})
.state('lab-components', {url: '/lab-details/:id/components', templateUrl: '...', controller: '...'});

With this, I’m able to navigate b/w views using $location.path(’/lab-results’), $location.path(’/lab-details/’ + id), etc.

However, I’d like to use ui-router a bit more and have nested views and pass data between controllers. If I change my routes to be as follows, it doesn’t transition to child views when I use $state.go(state.name). The URL does change in my browser, but no animations (or errors) happen.

.state('labs', {url: '/lab-results', templateUrl: '...', controller: '...'})
.state('labs.details', {url: '/:id', templateUrl: '...', controller: '...'})
.state('labs.details.components', {url: '/components', templateUrl: '...', controller: '...'});

Any idea why $location.path() works, but $state.go() does not?

3 Likes

$state.go works quite well in my project. Can you set up a simple codepen to describe your problem?

It works for me as well. Just from your sample, make sure you are doing:

$state.go('the-state-name-in-quotes')

Also, are you injecting $state into your controllers? Based on the URL changing, I think you are but just checking.

3 Likes

In your module definition you need to pass ‘ui.router’ as a dependency in order to use the Angular-UI-Router in your project:

E.g. angular.module('my_app', ['ionic', 'ui.router'])

Also make sure you inject $state into your Controller so it’s available for you to use there.

2 Likes

I was able to get $state.go to work last night, but unable to get the whole parent/child thing working. Here’s what works:

.state('lab-results', {url: '/lab-results'})
.state('lab-details', {url: '/lab-details/:id'})
.state('lab-components', {url: '/lab-details/:id/components'})

To navigate to the first, I’m using ui-sref=“lab-results”. For the details, I’m using the following:

<ion-item ng-repeat="item in labResults" item="item" ng-click="details(item.testId)">

In my controller, details is defined as:

    $scope.details = function (id) {
        $state.go('lab-details', {id: id});
    }

This works. For some reason, if I change my <ion-item from ng-click to ui-sref=“lab-details({id:id})”, it does not work.

I’m able to navigate to the 3rd subview in the same manner. However, if I change it all to use dot-notation to indicate parents and children, I can go to lab-results, but not to details or components. So $state.go is working, but not when using dot-notation like the following.

.state('labs', {url: '/lab-results'})
.state('labs.details', {url: '/:id'})
.state('labs.details.components', {url: '/components'})

I tried adding ‘ui.router’ as a dependency, but that doesn’t seem to affect the behavior. I’m happy to leave it as is since it works, just wondering why the dot notation doesn’t work.

2 Likes

Are lab.details and lab.details.components actual subviews for labs?

Yes, in the logical sense. Is there any naming requirements (for templates, etc.) to make them subviews?

“labs” is a list, “lab.details” is the detail screen and “lab.details.components” is a zoom in on a list in the details.

This is how it should be if they’re not really subviews. The ionic seed project has a good example of subviews on the tabbed page. This tripped me up for the longest while after switching to ui.router.

You don’t need to inject. Ionic already does that.

You just need : angular.module('ionicApp', ['ionic'])

3 Likes

Are you saying that subviews should be views that show up at the same time as the parent view? It makes sense if that’s true. I was thinking of it from a navigation perspective.

Correct, the main view is should be abstract and just be a shell which contains more sub-views. I too thought it was based on navigation at one point. Took me a few days to wrap my head around it.

Here’s a very crude example (you could make the content of sub-view 2 depend on what options are clicked/selected in subview 1):

//untested    
$stateProvider
    	.state('main-view', {
    		url: "/main",
    		abstract: true,
    		templateUrl: "templates/main.html"
    	})
    
    	.state('main.sub-view-1', {
    		url: '/sub-view-1',
    		templateUrl: 'templates/sub-view-1.html',
    		controller: 'Sub1Controller'
    	})
    
    	.state('main.sub-view-2', {
    		url: '/sub-view-2',
    		templateUrl: 'templates/sub-view-1.html',
    		controller: 'Sub2Controller'
    	});
4 Likes

I’m experiencing also an issue with $state.go, slightly different than this one but still related to state.go. The $state.go changes effectively the view, but the transition (slide) is random. Sometimes it slides and change the view (expected), sometimes, it just changes the view without slide. You can see it on the demo example: http://codepen.io/ionic/pen/kcjLb (need to try a few time back and forth between sign-in and logout).
Tested on chrome so far.

That demo in tabs does not have animation enabled for the tabs. So you wouldn’t see any.

This sample shows it : http://codepen.io/calendee/pen/IAjoL

that’s great, thank you @Calendee !

I have another issue, maybe you have an idea for that too. It’s not possible to enter text in the Username or Password fields on an iPad (I have the same problem locally on my app).

I wouldn’t know where to begin with that problem. I have no trouble entering text on devices. If you are still having issue, please open a new topic and put in a minimal code sample that you are having trouble with.

For me, the problem was that I didn’t have the

<ion-nav-view name="help"></ion-nav-view>

needed for the “help” route/path/state. Rookie mistake, but it cost me a few hours. Currently there are no errors thrown, $state.is('help') returns true, etc. Is there a use for $state that doesn’t involve <ion-nav-view>s? Otherwise it would be really nice if we could detect that issue and log a warning.

2 Likes

I too am a victim of this distinction. I should have known that when I decided to change the dashes to dots, and everything broke, it was the dots that did it. Hey @compudaze, the image is dead. I think it would be great if you could find it again. UI-Router is amazing, but sure needs some warnings about not confusing the different dimensions of logic, layout, and nesting! A warning error message sure would have been nice. A year later this is still a silent but deadly situation.

Have there been any updates to the way this works and or the way it should work or be implemented?

I also wasted 3 hours before I read your post. aaargh!

Thanks for putting this out there. Ionic team needs to put out better documentation. This is a commune kinda model right now with people helping each other. Reminds me of the story of blind men and the elephant.

How do you do this with typescript?