2016-05-25 8 views
16

ネストされたタブ/ビューがたくさんある複雑な設定が少しあります。 は、ここで私はtab.event.detail.info状態にリンクすることができui-sref="tab.event.detail({id: event.id})"を使用して、私の$stateProviderUI-RouterがURLから正しい状態にならない

$stateProvider 
    .state('tab', { 
     abstract: true, 
     url: '', 
     templateUrl: 'tabs.html' 
    }) 
    .state('tab.event', { 
     url: '/event', 
     views: { 
      'event': { 
       abstract: true, 
       templateUrl: 'event-tabs.html' 
      } 
     } 
    }) 
    .state('tab.event.list', { 
     url: '/list', 
     views: { 
      'list': { 
       templateUrl: 'event-list.html' 
      } 
     } 
    }) 
    .state('tab.event.detail', { 
     cache: false, 
     url: '/:id', 
     views: { 
      'detail': { 
       abstract: true, 
       templateUrl: 'event-detail-tabs.html' 
      } 
     } 
    }) 
    .state('tab.event.detail.info', { 
     cache: false, 
     url: '/info', 
     views: { 
      'info': { 
       templateUrl: 'event-detail-info.html' 
      } 
     } 
    }) 
    .state('tab.event.detail.map', { 
     cache: false, 
     url: '/map', 
     views: { 
      'map': { 
       templateUrl: 'event-detail-map.html' 
      } 
     } 
    }); 
  • の関連部分と/event/:id/info良いへのURLが変更されています。
  • URL /event/:idを入力すると、/event/:id/info,goodにリダイレクトされます。
  • しかし私はURL /event/:id/infoを入力すると、状態はよくない、/event/listtab.event.listし、URLにを変更します。私は/event/:id/info/event/:id/mapへのリンクを共有できるようにしたいと思いますが、彼らは/event/list
    へのリダイレクトを保つ

は、物事の多くを試みたが、それは仕事を得ることができない、助けてください!

編集:Plunkerの例を作成しましたが、アプリのURLを直接操作できないため、問題を再現できません。 https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

+0

を試すことができますが、あなたも$ urlRouterProviderを追加しました。さもないと?はいの場合は、それを表示できますか? –

+0

私はそれを使用しましたが、混乱を避けるためにコメントしました。 – barro32

+0

あなたはサーバー側で一致するURLパターンを実行していませんか? – MMhunter

答えて

1

を参照してください。

$urlRouterProvider 
    .when('/event/:id/info', '/event/:id/info') 
    .when('/event/:id/map', '/event/:id/map') 

をしたり、

var config = ['$rootScope', '$state', 
function ($rootScope, $state) { 

    //you can make the below code better by comparing URL you are hitting in the if condition. Depending on URL you can navigate to info or map state. Also, you can make the id dynamic 

    $rootScope.$on('$stateChangeStart', function (event, toState) {  
    if (toState.name == "tab.event.list") { 
     event.preventDefault() 
     $state.go('tab.event.detail.info', {id: 2}); 
    } 
    }); 

}] 
+0

ありがとう!状態を保存するために '$ stageChangeStart'を使いました。 'tab.detail.info'は、ロードするすべてを待ってから、目的の状態にリダイレクトされました。完璧ではないが動作する。 – barro32

+0

@ barro32:この問題には恩恵がありませんでしたか? :P –

7

あなたの"tab.event.detail"状態は、自分自身で起動できない状態を意味する抽象的な状態であるため、この場合は自動的に子状態をロードします("tab.event.detail.info"状態)。

覚えておいてください:一度に1つの状態のみをアクティブにすることができます

すべてのあなたの状態定義した後にあなたがこれを使用して試すことができますマニュアルをhttps://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

+0

私はそのことを理解しており、それは期待通りに機能しています。問題は私が '/ event /:id/info'にリンクできないことです。私はそれを少し明確にするために私の質問を編集しました。 '/リスト'、 ビュー:{ 'リスト':{ templateUrl: 'イベント-するlist.html' の場合について、あなたは '.state( 'tab.event.list'、{ URLを変更する方法 – barro32

+0

} } } ' リストの一番下までの位置 – Miqe

+0

' event/list/info'にリダイレクトされる 'tab.event.list'の位置を変更しました。 'tab.event.list'と' tab.event.detail'または互いに混乱してしまいます。 – barro32

関連する問題