AngularJS UI-Router несколько состояний с одним и тем же URL-адресом

У меня есть многостраничная форма, сделанная с использованием AngularJS и ui-router маршрутизатора AngularUI. У каждого шага есть собственный URL (/ step1 -> / step2 -> / step3). На шаге 2 форма предлагает пользователю выбор между двумя вариантами. В зависимости от того, какой вариант выбран, я хочу иметь возможность отправить пользователя в одно из двух состояний, но независимо от того, какое из двух состояний выбрано, я хочу, чтобы URL-адрес изменился на / step3.

Я пробовал многочисленные попытки заставить это работать, в том числе наличие двух альтернативных состояний, одно как дочернее для другого (показано ниже), в результате чего отображается только родительский (шаг-3-а), и имеется абстрактный родительский шаг (шаг -3) с URL-адресом, а затем двумя дочерними шагами (step-3-a и step-3-b) и маршрутизацией с использованием события onEnter и перехода. Оба они не смогли правильно отобразить контент (последний выгнал пользователя в / user / userId).

Наверное, в этом поместье можно проехать, но я не могу заставить его работать. Любая помощь или совет будут с благодарностью приняты.

Спасибо

$stateProvider
    .state('form', {
      abstract: true,
      views: {
        ...
      }
    })
    .state('user-form', {
      url: '/user/:userId',
      parent: 'form',
      abstract: true,
      views: {
        ...
      }
    })
    .state('step-1', {
      parent: 'user-form',
      url: '/step1',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-2', {
      parent: 'user-form',
      url: '/step2',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-a', {
      parent: 'user-form',
      url: '/step3',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-b', {
      parent: 'step-3-a',
      data: {
        ...
      },
      views: {
        ...
      }
    })

javascript angularjs angular-ui-router angular-ui
person AndrewD    schedule 04.09.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы неправильно делаете наследование. Родители и дети должны быть разделены точками. Ваша конфигурация должна выглядеть так:

.state('step-3', {
  abstract: true,
  url: '/step3',
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.a', {
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.b', {
  data: {
    ...
  },
  views: {
    ...
  }
})

Таким образом, оба дочерних состояния будут отражать URL-адрес своего родителя.

person Nate Abele    schedule 26.09.2013
comment
Согласно: github.com/angular- ui / ui-router / wiki / можно использовать либо точечную нотацию (как вы использовали), либо свойство parent (как я использовал). Хотя я признаю, что в долгосрочной перспективе я, вероятно, буду использовать точечную нотацию, поскольку ее легче читать. - person AndrewD; 01.10.2013
comment
Да, это то, что говорится в документации, но в реальном коде другие формы в настоящее время плохо поддерживаются. - person Nate Abele; 26.04.2014