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',url: '/info',views: {
            'info': {
                templateUrl: 'event-detail-info.html'
            }
        }
    })
    .state('tab.event.detail.map',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

在您定义了所有状态之后，您可以尝试使用它：

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

}]

原文地址：https://www.jb51.cc/angularjs/144114.html