Contrôleur parent instancié à chaque fois qu'une vue enfant est appelée

Question

J'utilise ui-router et j'ai une configuration dans laquelle j'utilise une vue parent qui a un contrôleur et une vue enfant qui ont aussi leurs propres contrôleurs. Chaque fois que je navigue vers l'une des vues enfant, le contrôleur parent est de nouveau instancié et effectue donc des requêtes inutiles au serveur. Je souhaite pouvoir naviguer entre les états enfants et réutiliser les variables résolues par le contrôleur parent.

Comment puis-je empêcher l'instanciation du contrôleur parent à chaque fois?

C'est ma config de routage:

$stateProvider 
    .state('researchLayoutEditor', { 
     url: '/research/:researchId/layoutEditor/:orderInGroup', 
     controller: 'layoutEditorController', 
     controllerAs: 'layoutEditorCtrl', 
     templateUrl: 'app/researchManagement/researchLayoutEditor/layoutEditor.html', 
     redirectTo: 'researchLayoutEditor.slide', 
     params: { 
      group: 'A', 
      orderInGroup: '0' 
     }, 
     resolve: { 
      researchLayout: function (researchesService, $stateParams) { 
       return researchesService.getResearchLayout($stateParams.researchId, false); 
      }, 
      research: function (researchesService, $stateParams) { 
       return researchesService.getResearch($stateParams.researchId); 
      } 
     } 
    }).state('researchLayoutEditor.slide', { 
     url: '/textual', 
     templateUrl: 'app/researchManagement/researchLayoutEditor/textSlide.html', 
     controller: 'textSlideController', 
     controllerAs: 'txtSlide' 
    }).state('researchLayoutEditor.movie', { 
     url: '/video', 
     templateUrl: 'app/researchManagement/researchLayoutEditor/movieSlide.html', 
     controller: 'movieSlideController', 
     controllerAs: 'movieSlide', 
     resolve: { 
      movieCategories: function (utilsService) { 
       return utilsService.getVideoCategories(); 
      } 
     } 
    }).state('researchLayoutEditor.memory', { 
     url: '/memory', 
     templateUrl: 'app/researchManagement/researchLayoutEditor/memorySlide.html', 
     controller: 'memorySlideController', 
     controllerAs: 'memorySlide' 
    }).state('researchLayoutEditor.question', { 
     url: '/question', 
     templateUrl: 'app/researchManagement/researchLayoutEditor/questionSlide.html', 
     controller: 'questionSlideController', 
     controllerAs: 'questionSlide' 
    }); 

Et c'est le HTML:

<div id="mainContent"> 
    <!-- our nested state views will be injected here --> 
    <div ui-view class="inner-content"></div> 
</div> 

Answer 1

Eh bien, Après avoir essayé la manière la plus utile de déboguer par élimination, j'ai trouvé le problème qui était la façon dont j'ai construit l'URL. À mon état de parent, j'avais l'URL définie comme ceci:

url: '/research/:researchId/layoutEditor/:orderInGroup', 

lorsque le paramètre orderInGroup changé sur chaque clic sur l'état de l'enfant. Donc, l'URL finale ressemblait à ceci par exemple:

.../#/recherche/37/LayoutEditor/1/vidéo

Apparemment, après avoir changé l'emplacement du paramètre "orderInGroup" et mettre à la fin de l'URL

.../#/recherche/37/LayoutEditor/vidéo/1

et en déplaçant le

   params: { 
        group: 'A', 
        orderInGroup: '0' 
       } 

objet aux états enfant également, le problème a été résolu. Ainsi, la configuration d'URL qui a finalement travaillé ressemblait à ceci (je me suis déplacé le /: orderInGroup enfant à l'autre):

$stateProvider 
      .state('researchLayoutEditor', { 
       url: '/research/:researchId/layoutEditor', 
       controller: 'layoutEditorController', 
       controllerAs: 'layoutEditorCtrl', 
       templateUrl: 'app/researchManagement/researchLayoutEditor/layoutEditor.html', 
       redirectTo: 'researchLayoutEditor.slide' 
      }) 
      .state('researchLayoutEditor.movie', { 
       url: '/video/:orderInGroup', 
       templateUrl: 'app/researchManagement/researchLayoutEditor/movieSlide.html', 
       controller: 'movieSlideController', 
       controllerAs: 'movieSlide', 
       params: { 
        group: 'A', 
        orderInGroup: '0' 
       } 
      }) 
      .state('researchLayoutEditor.slide', { 
       url: '/textual/:orderInGroup', 
       templateUrl: 'app/researchManagement/researchLayoutEditor/textSlide.html', 
       controller: 'textSlideController', 
       controllerAs: 'txtSlide', 
       params: { 
        group: 'A', 
        orderInGroup: '0' 
       } 
      }); 

Answer 2

Essayez d'utiliser l'état parent comme abstrait, est ici un plnkr exemple check it out