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

}]

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...