Angularjs 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

  ，好
• 但是如果我输入URL

  /event/：id/info

  ，状态将变为

  tab.event.list

  和

  /event/list

  ，不好

我希望能够共享指向

/event/:id/info

和

/event/:id/map

的链接，但它们会不断重定向到

/event/list

尝试了很多东西，但都无法成功，请帮助

编辑：制作了一个Plunker示例，但我无法复制这个问题，因为我无法直接操作应用程序的URL

您的

“tab.event.detail”

状态是一种抽象状态，这意味着它自身无法激活该状态，因此在这种情况下它将自动加载子状态

“tab.event.detail.info”

状态

请记住：一次只能激活一个状态

---

请参阅文档

定义所有状态后，您可以尝试使用此选项：

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

}]

---

我明白这一点，而且它也按预期工作，问题是我无法链接到

/event/：id/info

。我编辑了我的问题来澄清一下。如果您更改

.state（'tab.event.list'，{url:'/list'，视图：{'list'：{templateUrl:'event list.html'}}），怎么样

列表底部的位置i更改了

tab.event.list

的位置，该位置现在重定向到

event/list/info

。因此，

tab.event.list

和

tab.event.detail

或相互混淆。路由器将URL

'/:id'

或

/list

更改为

'tab.event.detail'

状态或

'tab.event.list'

状态，因此如果可以调整URL，可以将

'tab.event.detail'

状态URL更改为

“/detail/：id”

以避免混淆。然后尝试点击URL

/event/detail/：id/info

如果我尝试的话，仍然会转到

/event/list

。我尝试使用正则表达式将任何不属于

list

的内容与

:id

匹配，并与

'tab.event.detail'、{url:'/{:id^（？。*list.*$}}

匹配，但这也不起作用。我不明白为什么只有这两个路由不起作用。您是否也添加了$urlRouterProvider。否则？如果是的话，你能展示一下吗？我已经用过了，但为了避免混淆，我暂时把它注释掉了。你确定你没有在服务器端进行url模式匹配吗？@barro32检查我的答案，如果有帮助的话谢谢！我使用

$stageChangeStart

保存状态，例如

tab.detail.info

，等待加载所有内容，然后重定向到所需状态。虽然不完美，但很有效。@barro32:这个问题不是有悬赏吗P