angularjs - UI-Router 不会从 URL 正确状态

Question

我的设置有点复杂，有很多嵌套的选项卡/ View 。
以下是我的$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 , 好 .

但是 如果我输入 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

Answer 1

您的 "tab.event.detail" state 是一个抽象状态，这意味着它自己的状态不能被它自己激活，因此在这种情况下它会自动加载子状态 "tab.event.detail.info"状态。

记住:一次只能激活一种状态 .

引用文档 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views