UI-маршрутизатор не исправляет состояние по URL-адресу

У меня немного сложная настройка с большим количеством вложенных вкладок/просмотров. Вот соответствующие части моего $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'
            }
        }
    });

Используя ui-sref="tab.event.detail({id: event.id})", я могу ссылаться на состояние tab.event.detail.info, а URL-адрес меняется на /event/:id/info, хорошо.
Если я введу URL /event/:id, он перенаправится на /event/:id/info, good.
НО, если я введу URL /event/:id/info, состояние изменится на tab.event.list и URL на /event/list, не хорошо.

Я хотел бы иметь возможность обмениваться ссылками с /event/:id/info и /event/:id/map, но они перенаправляются на /event/list
Пробовал много вещей, но не мог заставить его работать, пожалуйста, помогите!

Изменить: сделал пример Plunker, но я не могу реплицировать проблему, потому что я не могу напрямую манипулировать URL-адресом приложения. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Ответ 1

Вы можете попробовать использовать это после того, как вы определили все свои состояния:

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

ИЛИ вы можете попробовать

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});
    }
  });

}]

Ответ 2

Ваше состояние "tab.event.detail" является абстрактным состоянием, которое означает, что оно само не может быть активировано им, поэтому оно автоматически загрузит дочернее состояние в этом случае "tab.event.detail.info".

Помните: может быть активировано только одно состояние за раз..

Обратитесь к документации https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views