Вложенные состояния ui-router, базовое понимание

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

Вы можете запросить анкеты аннотация.

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

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