Блог

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

Ниже приведен рабочий код: (Обратите внимание на последнее состояние «новое»)

 app.config(
function($stateProvider, $urlRouterProvider) {

    $stateProvider
     .state('home', {
        url: '/home',
        templateUrl: '/views/home.html',
        controller: 'MainCtrl',
        resolve: {
            qstnrPromise: ['qstnrs', function(qstnrs) {
                return qstnrs.getAll();
            }]
        }
     })

     .state('questionnaires', {
        url: '/questionnaires/{id}',
        templateUrl: '/views/questionnaire.html',
        controller: 'QuestionsCtrl',
        resolve: {
            questionnaire: ['$stateParams', 'qstnrs', function($stateParams, qstnrs){
                return qstnrs.get($stateParams.id);
            }]
        }
     })

     .state('new', {
        url: '/questionnaires/{id}/new',
        template: '<h3> testy </h3>'
     });


     //$urlRouterProvider.otherwise('home');
     $urlRouterProvider.otherwise(function($injector, $location){
        $injector.invoke(['$state', function($state) {
            $state.go('home');
        }]);
     });
});
  

Если я попытаюсь изменить его следующим образом, это не удастся. URL-адрес в браузере изменяется, но я не получаю шаблон.

  .state('questionnaires.new', {
    url: '/new',
    template: '<h3>New question</h3>'
 });
  

Я неправильно понял состояния? Или где я ошибся?

Попробуйте изменить свое новое состояние на:

 .state('new', {
  url: '/new',
  parent: 'questionnaires',
  template: '<h3>New question</h3>'
})
  

Посмотрите, работает ли это для вас.

Вы можете сделать состояние вопросников абстрактным.

 $stateProvider
.state('questionnaires', {
    abstract: true,
    url: '/questionnaires',
})
.state('questionnaires.new', {
    // url will become '/questionnaires/new'
    url: '/new'
    //...more
})
  

Но в этом случае вам нужно будет добавить одно дополнительное вложенное состояние, чтобы реализовать функциональность, необходимую для $stateParams.id.