Родительский контроллер создается каждый раз, когда дочерний вид называется

Question

Я использую ui-router, и у меня есть конфигурация, в которой я использую родительское представление, у которого есть контроллер и дочерний вид, которые также имеют свои собственные контроллеры. Каждый раз, когда я перехожу к одному из дочерних представлений, родительский контроллер создается снова и, следовательно, выполняет ненужные запросы на сервер. Я хочу, чтобы иметь возможность перемещаться между дочерними состояниями и повторно использовать переменные, которые были разрешены родительским контроллером.

Как я могу предотвратить создание экземпляра родительского контроллера каждый раз?

Это моя конфигурация маршрутизации:

$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' 
    }); 

И это HTML:

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

Answer 1

Ну, после того, как вы попробовали самый полезный способ отладки путем исключения, я нашел проблему, с которой я создал URL. В моем родительском состоянии, я имел URL, определенные как это:

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

когда параметр orderInGroup изменен на каждом нажатие на состоянии ребенка. Таким образом, окончательный URL выглядел как это, например:

.../#/исследования/37/LayoutEditor/1/видео

Видимо, после изменения расположения параметра "orderInGroup" и положить его в конце URL

.../#/исследования/37/LayoutEditor/видео/1

и перемещение

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

объект, к которому относится ребенок, проблема была решена. Итак, конфигурация URL, который наконец работал выглядел так (я переместил /: orderInGroup для ребенка состояния):

$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

Попробуйте использовать родительское состояние как абстрактные, вот plnkr примера check it out