4

AngularJS と AngularUI ルーター ui-router を使用して複数ページのフォームを作成しました。各ステップには独自の URL があります (/step1 -> /step2 -> /step3)。ステップ 2 で、フォームはユーザーに 2 つのオプションからの選択肢を提供します。選択したオプションに応じて、ユーザーを 2 つの状態のいずれかに送信できるようにしたいのですが、2 つの状態のどちらが選択されていても、URL を /step3 に変更したいと考えています。

私はこれを機能させるために多くの努力を試みました.2つの代替状態をもう一方の子として(以下に示します)、親(ステップ-3-a)のみが表示されるようにし、抽象的な親ステップ(ステップ-3) URL と 2 つの子ステップ (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: {
        ...
      }
    })
4

1 に答える 1

5

あなたは継承を間違っています。親と子はドットで区切る必要があります。構成は次のようになります。

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

このようにして、両方の子ステートに親の URL が反映されます。

于 2013-09-26T11:51:59.263 に答える