Question

我有一些复杂的设置，有很多嵌套的标签/视图。以下是我notifyDatasetChanged()

的相关部分

$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，良好。
如果我输入网址/event/:id/info，则会重定向到/event/:id，良好。
但是如果我输入网址/event/:id/info，状态将更改为/event/:id/info，网址将更改为tab.event.list，不良。

我希望能够分享指向/event/list和/event/:id/info的链接，但他们会继续重定向到/event/:id/map
尝试了很多东西，但无法让它发挥作用，请帮忙！

编辑：制作了一个Plunker示例，但我无法复制问题，因为我无法直接操作应用的网址。 https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Answer 1

您的"tab.event.detail"状态是一个抽象状态，意味着它自身无法激活的状态，因此它将自动加载子状态"tab.event.detail.info"状态。

请记住：一次只能激活一个州。

请参阅文档https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Answer 2

您可以在定义完所有状态后尝试使用此功能：

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

}]

UI-Router无法从URL更正状态

2 个答案: