Вложенные состояния AngularJS с использованием stateProvider

Question

Я пытаюсь реализовать вложенные состояния с помощью stateProvider. Облицовка проблем при загрузке вложенных состояний с использованием URL-маршрутизации. Я создал два независимых состояния и два вложенных состояния для одного из автономных состояний. Пожалуйста, проверьте настройки состояния ниже:

.state('state1',{ 
     url : "/page1", 
     templateUrl : "/views/page1.html", 
     contoller : 'page1ctrl' 
}) 
.state('state2', { 
     url : "/page2", 
     templateUrl : "/views/page2.html", 
     controller : 'page2ctrl' 
}) 
state('state2.nestedstate1', { 
     url : "/:nestedstate1", //passing as parameter 
     templateUrl : "/views/temp1.html", 
     controller : 'page2ctrl' 
}) 
.state('state2.nestedstate1.nestedstate2', { 
     url : "/nestedstate2/:param1/:param2", 
     templateUrl : "/views/temp2.html", 
     controller : 'ctrl' 
}) 

Проблема: При попытке загрузить полную страницу напрямую, используя полный URL index.html/page2/nestedstate1/nestedstate2/fname/lname, это первые данные нагрузки от последнего состояния ребенка nestedstate2, а затем падают обратно в родительском состоянии " nestedstate1 ', а также обновляет URL-адрес до index.html/page2/nestedstate1.

Обязательное поведение - сначала выполнить родительское состояние, чем дочернее. Например, nestedstate1 необходимо загрузить до nestedstate2.

Просьба указать, не хватает ли какой-либо конфигурации.

Благодаря

Answer 1

Я создал working example here. Это 1: 1 для вашего сценария.

В приведенном выше сценарии я нашел только один опечатка:

// missing dot 
state('state2.nestedstate1', { 
// should be 
.state('state2.nestedstate1', { 

Пример затем работает, при использовании этих вызовов:

<a ui-sref="state1"> 

    // ui-sref 
    <a ui-sref="state2"> 
    <a ui-sref="state2.nestedstate1({nestedstate1: 'theNestedStateA'})"> 
    <a ui-sref="state2.nestedstate1.nestedstate2({ 
    nestedstate1: 'theNestedStateB', param1: 'value1' ,param2: 'value2'})"> 

    // href 
    <a href="#/page2"> 
    <a href="#/page2/nestedstate0"> 
    <a href="#/page2/nestedstate1/nestedstate2/fname/lname"> 

Все остальное должно быть почти то же самое. Вы можете сравнить эту рабочую версию с локальным кодом, чтобы узнать, что случилось ...

Проверить это here

Продлить

Каждый вид в (State2 цепи) снабжена собственным контроллером

.state('state2', { 
    url : "/page2", 
    templateUrl : "/views/page2.html", 
    controller : 'page2ctrl' 
}) 
.state('state2.nestedstate1', { 
    url : "/:nestedstate1", //passing as parameter 
    templateUrl : "/views/temp1.html", 
    controller : 'page2Nestedctrl' 
}) 
.state('state2.nestedstate1.nestedstate2', { 
    url : "/nestedstate2/:param1/:param2", 
    templateUrl : "/views/temp2.html", 
    controller : 'ctrl' 
}) 

И они так:

.controller('page2ctrl', ['$scope', function ($scope) { 
    console.log('page2ctrl') 
}]) 
.controller('page2Nestedctrl', ['$scope', function ($scope) { 
    console.log('page2Nestedctrl') 
}]) 
.controller('ctrl', ['$scope', function ($scope) { 
    console.log('ctrl') 
}]) 

Тогда при переходе к URL: page2/nestedstate1/nestedstate2/fname/lname, мы можем увидеть это в консоли:

page2ctrl 
page2Nestedctrl 
ctrl 

И это должно показать, что все государства инициируются в ожидаемом порядке