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': { ... } 
    'pageContent@main': { ... } 
    } 
}) 
// 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': { ... } 
    'pageContent@main': { ... } 
    } 
}); 

現在我們可以去美國如需要

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

注：所有兒童都注入其觀點，爲主要對象「pageContent」。我建議增加一個目標，到每個狀態（即到管理和emergencyDetail），因此，兒童不更換母

一些示例有工作plunker

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