CODEWITHSUNDEEP
angularjsangular-ui-router
barro32
barro32

Reputation: 2708

UI-Router Not Going to Correct State from URL

I have a bit of a complicated set up with lots of nested tabs / views. Here are the relevant parts of my $stateProvider

$stateProvider
    .state('tab', {
        abstract: true,
        url: '',
        templateUrl: 'tabs.html'
    })
    .state('tab.event', {
        url: '/event',
        views: {
            'event': {
                abstract: true,
                templateUrl: 'event-tabs.html'
            }
        }
    })
    .state('tab.event.list', {
        url: '/list',
        views: {
            'list': {
                templateUrl: 'event-list.html'
            }
        }
    })
    .state('tab.event.detail', {
        cache: false,
        url: '/:id',
        views: {
            'detail': {
                abstract: true,
                templateUrl: 'event-detail-tabs.html'
            }
        }
    })
    .state('tab.event.detail.info', {
        cache: false,
        url: '/info',
        views: {
            'info': {
                templateUrl: 'event-detail-info.html'
            }
        }
    })
    .state('tab.event.detail.map', {
        cache: false,
        url: '/map',
        views: {
            'map': {
                templateUrl: 'event-detail-map.html'
            }
        }
    });

I'd like to be able to share links to /event/:id/info and /event/:id/map but they keep redirecting to /event/list
Tried lots of things but can't get it to work, please help!

Edit: Made a Plunker example but I can't replicate the problem because I can't directly manipulate the URL of the app. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Upvotes: 16

Views: 1244

Answers (2)

Rahul Arora
Rahul Arora

Reputation: 4523

You can try using this after you have defined all your states:

$urlRouterProvider
    .when('/event/:id/info', '/event/:id/info')
    .when('/event/:id/map', '/event/:id/map')

OR you can try

var config = ['$rootScope', '$state',
 function ($rootScope, $state) {

  //you can make the below code better by comparing URL you are hitting in the if condition. Depending on URL you can navigate to info or map state. Also, you can make the id dynamic

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name == "tab.event.list") { 
      event.preventDefault()
      $state.go('tab.event.detail.info', {id: 2});
    }
  });

}]

Upvotes: 1

miqe
miqe

Reputation: 3369

Your "tab.event.detail" state is an abstract state that means the state it self can not be activated by it self so it will automatically load the child state in this case "tab.event.detail.info" state.

Remember: only one state at a time can be activated.

Refer to the documentation https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Upvotes: 7

Related Questions