UI-路由器4级状态

Question

我们是在具有以下多层次导航树项目：

main { 
    inactive 
    profile 
    active 
    admin { 
    settings 
    registration 
    activePupil 
    activeAdmin 
    emergencyDetail { 
     photos 
    } 
    } 
} 

和实际代码：

$stateProvider 
    // this state is placed in the <ion-nav-view> in the index.html 
    .state('main', { 
     url: '/main', 
     abstract: true, 
     templateUrl: 'main/templates/menu.html', 
     controller: 'MenuCtrl as menu' 
    }) 
    .state('main.inactive', { 
     url: '/inactive', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/inactive.html', 
      controller: 'InactiveCtrl as inactive' 
     } 
     } 
    }) 
    .state('main.profile', { 
     url: '/profile', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/profile.html', 
      controller: 'ProfileCtrl as profile' 
     } 
     } 
    }) 
    .state('main.active', { 
     url: '/active', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/active.html', 
      controller: 'ActiveCtrl as active' 
     } 
     } 
    }) 
    .state('main.admin', { 
     url: '/admin', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin.html', 
      controller: 'AdminCtrl as admin' 
     } 
     } 
    }) 
    .state('main.adminSettings', { 
     url: '/admin/settings', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin-settings.html', 
      controller: 'AdminSettingsCtrl as adminsettings' 
     } 
     } 
    }) 
    .state('main.adminRegistration', { 
     url: '/admin/registration', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin-registration.html', 
      controller: 'AdminRegistrationCtrl as adminregistration' 
     } 
     } 
    }) 
    .state('main.adminActivePupils', { 
     url: '/admin/active/pupils', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/pupils-active.html', 
      controller: 'PupilsActiveCtrl as pupilsactive' 
     } 
     } 
    }) 
    .state('main.adminActiveAdmins', { 
     url: '/admin/active/admins', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin-active.html', 
      controller: 'AdminActiveCtrl as adminactive' 
     } 
     } 
    }) 
    .state('main.adminEmergencyDetail', { 
     url: '/admin/emergency/:id', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin-emergency-detail.html', 
      controller: 'AdminEmergencyCtrl as adminemergency' 
     } 
     } 
    }) 
    .state('main.adminEmergencyDetailPhotos', { 
     url: '/admin/emergency/:id/photos', 
     views: { 
     'pageContent': { 
      templateUrl: 'main/templates/admin-emergency-photos.html', 
      controller: 'AdminEmergencyCtrl as adminemergency' 
     } 
     } 
    }); 
    $urlRouterProvider.otherwise('/main/inactive'); 

遗憾的是，现有的答案是不帮助我们。 Angular UI-Router的维基也是如此。我们应该如何改变规定，像...

$state.go('main.admin.emergencyDetail.photos') 

...是可能的，所以回到main.admin.emergencyDetail将成为可能？

Answer 1

似乎（如果我理解这个问题），你可以只改变当前平板态结构为分级一个。而已。

通常情况下，孩子应该注入其内容为父母的观点，但我们甚至可以保持逻辑，所有的孩子都瞄准盛大父（主）视图：

// admin will stay 
.state('main.admin', { 
    url: '/admin', 
    views: { 
    'pageContent': { ... } 
    } 
})  
// state nesting starts here 
.state('main.adminEmergencyDetail', { 
    // no need the use parent url .. it will be inherited 
    //url: '/admin/emergency/:id', 
    url: '/emergency/:id', 
    views: { 
    // target is main view 
    //'pageContent': { ... } 
    '[email protected]': { ... } 
    } 
}) 
// same for all other siblings of the EmergencyDetail 
... 
// and grand child 
.state('main.admin.EmergencyDetail.Photos', { 
    // grand parent and parent url will be already in play 
    //url: '/admin/emergency/:id/photos', 
    url: '/photos', 
    views: { 
    // target is main view 
    //'pageContent': { ... } 
    '[email protected]': { ... } 
    } 
}); 

现在我们可以去美国如需要

$state.go('main.admin.emergencyDetail.photos', {id: 12345}); 

注：所有儿童都注入其观点，为主要对象“pageContent”。我建议增加一个目标，到每个状态（即到管理和emergencyDetail），因此，儿童不更换母

一些示例有工作plunker

Nested states or views for layout with leftbar in ui-router?