[解決済み] AngularJSのUI-Routerでステートをデフォルトのサブステートにリダイレクトする。

質問

あるデータを表示するタブベースのページを作成しています。 AngularJsでUI-Routerを使用して状態を登録しています。

私の目的は、ページロード時に1つのデフォルトのタブが開くようにすることです。各タブにはサブタブがあり、タブを変更するときにデフォルトのサブタブが開かれるようにしたいと思います。

私は onEnter 関数でテストしていましたが、内部では $state.go('mainstate.substate'); を使っていますが、ループ効果の問題でうまくいかないようです（state.go to substateで親のstateを呼び出したりして、ループになります）。

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

ここでは プランカーデモ .

今のところ、デフォルトのタブが開いていないことを除けば、すべてがうまくいっており、まさに私が必要としているものです。

提案、意見、アイデアをありがとうございました。

どのように解決するのですか？

更新しました。 1.0以降 redirectToをいきなりサポート。

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

私が作成した の例を示します。 .

この解決策は、リダイレクトの問題に対する素晴らしい "Comment" によるものです。 .when() ( https://stackoverflow.com/a/27131114/1679310 ) そして に対するクールなソリューション (クリス T によるものですが、元の投稿は yahyaKacem によるものです)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

ではまず、リダイレクトの設定でmainを拡張してみましょう。

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

そして、この数行だけを実行に追加します。

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, {location: 'replace'})
      }
    });
}]);

この方法で、どのステートでもデフォルトのリダイレクトを調整することができます。 はこちら

EDIT: @Alec さんのコメントから、ブラウザの履歴を保存するオプションを追加しました。