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

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

通常，孩子应该将其内容注入父母的视图中，但我们甚至可以保持所有孩子都瞄准祖父母（主要）视图的逻辑：

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

注意：所有孩子都将其视图注入主要目标＆＃39; pageContent＆＃39;。我建议在每个州添加一个目标（即进入admin和emergencyDetail），这样孩子就不会替换父

使用plunker的一些例子

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

UI-Router 4级状态

1 个答案: