Comment charger automatiquement une deuxième sous-vue en utilisant ui-router et javascript?

Question

J'ai un SPA chargement du schéma suivant:

Page principale> Affichage> Sous-vue> Sous-vue.

La page principale charge View avec la navigation principale. La sous-vue montre les états contenant une liste d'éléments différente selon le lien choisi dans la navigation principale.

Ces éléments sont des liens pour explorer les détails, qui sont affichés dans la sous-sous-vue, où j'ai 3 onglets. J'essaye de penser à une solution pour charger automatiquement le premier onglet de détails quand un lien est cliqué sur la liste de Subview. En outre, le lien dans la liste Subview transmet un paramètre pour récupérer un objet dans ma base de données. Au début, ce que j'essayais de faire est de mettre le premier onglet dans mon HTML, donc quand un lien est cliqué, il apparaît, mais ce n'est pas approprié et je dois le faire de manière plus dynamique, une fois que je '' m séparer tous les contrôleurs. Voici ma configuration de route:

$stateProvider 
     .state('main.application', { 
      abstract: true, 
      url: '/application', 
      template: '<ui-view/>' 
     }) 
     .state('main.application.index', { 
      url: '', 
      templateUrl: 'app/application/application.html', 
      controller: 'ApplicationController as applicationCtrl', 
      resolve: resolve.index 
     }) 
     .state('main.application.settings', { 
      url: '/settings/:id', 
      templateUrl: 'app/application/settings/application.settings.html', 
      controller: 'ApplicationSettingsController as appSettingsCtrl', 
      resolve: resolve.settings 
     }) 
     .state('main.application.settings.info', { 
      url: '/info', 
      templateUrl: 'app/application/settings/info/application.settings.info.html', 
      controller: 'ApplicationSetInfoController as appInfoCtrl', 
      resolve: resolve.settings 
     }) 
     .state('main.application.settings.platforms', { 
      url: '/platforms', 
      templateUrl: 'app/application/settings/platforms/application.settings.platforms.html', 
      controller: 'ApplicationSettingsController as appSettingsCtrl', 
      resolve: resolve.settings 
     }) 
     .state('main.application.settings.keys', { 
      url: '/keys', 
      templateUrl: 'app/application/settings/keys/application.settings.keys.html', 
      controller: 'ApplicationSetKeysController as appKeysCtrl', 
      resolve: resolve.settings 
     }); 

Answer 1

Vous pouvez utiliser ng-include pour les partiels dynamiques. Les vues multiples sont problématiques bien qu'elles soient supportées par ui-router - mais pas sans problèmes.

Une autre option consiste à utiliser ng-switch avec des directives personnalisées si vous avez une liste finie de vues connues à afficher. C'est mon approche préférée. Tels que:

<div ng-switch="currentSelection"> 
    <div ng-switch-when="subPage1" subpage-one /> 
    <div ng-switch-when="subPage2" subpage-two /> 
</div> 

De cette façon, si vous voulez automatiquement, affichez d'abord une certaine page, vous définissez $scope.currentSelection = 'subPage1'