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 的wiki也是如此。我们应该如何改变状态，比如...

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

...是可能的，所以回到 main.admin.emergencyDetail 是可能的吗？

Answer 1

似乎（如果我理解这个问题）您可以将 当前平面 状态结构更改为 分层结构 。就是这样。

通常，child应该将其内容注入parent的视图，但我们甚至可以保持逻辑，所有children都针对grand parent （主要）视图：

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

注意：所有 children 都将其视图注入主要目标 'pageContent'。我建议在每个状态中添加一个目标（即添加到 admin 和 emergencyDetail 中），因此 children 不会替换 parent

一些使用 plunker 的例子

UI-路由器4级状态

UI-Router 4 level state

state

nested

angularjs

angular-ui-router