UI路由器:导航到抽象父状态时重定向到子状态

Question

在我的音乐应用程序中,我对应用程序的顶级状态进行了重复操作以创建导航链接.其中一个名为library的顶级状态是抽象的,并且具有子状态(可以使用制表符导航).由于我使用的是ng-repeat,因此抽象状态具有指令ui-sref="library".但是,不可能导航到这样的抽象父状态,而是我需要编写ui-sref="library.albums".由于直接来自州提供商的ng-repeat数据,我无法做到这一点.如何在"库"上设置默认子状态,以便每当访问该状态时,它都会重定向到子项？

这是我的设置图:

Answer 1

在我寻找相同的问题时发现了这个问题,然后我在Angular UI-Router的FAQ页面上找到了这个问题.https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

如何:设置默认/索引子状态

1. 使父状态为抽象.

   $stateProvider
       .state('library', {
           url: '/library',
           abstract: true,
           template: '<ui-view></ui-view>'
       })
       .state('library.albums', {
           url: '/albums',
           template: '<h1>Albums</h1>'
       });
   

2. 然后,如果您为子状态指定一个空URL,它将匹配确切的父URL.但是,如果要为子项保留单独的URL,则可以执行以下操作:

   $urlRouterProvider.when('/library', '/library/albums');
   

如果您需要更多信息,请阅读给定的GitHub WIKI URL.

Answer 2

不幸的是，您不能使用ui-sref链接到抽象状态。

你可以尝试这样的事情：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.name == 'library'){
        event.preventDefault();
        $state.go('library.albums', toParams);
    }
}

不过，您可以执行以下操作，而不是对每个状态重定向进行硬编码：

$stateProvider
    .state('library', {
        url: '/library',
        data: {
            redirect: 'library.albums'
        }
    })
    .state('library.albums', {
        url: '/albums',
        data: {
            redirect: false
        }
    });

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.data && toState.data.redirect){
        event.preventDefault();
        $state.go(toState.data.redirect, toParams);
    }
}