2017-01-22 13 views
1

非常に単純なルックブックアプリケーションを作成しようとしています。しかし、私はルートが機能するように見えることはできません。私はthis questionへの答えを試して、ルートをデバッグしました。コンソールに何も表示されませんでした。Ionic UIルーターが子ビューで動作しない

私は、ユーザーがページでいくつかの外見を見て、それぞれの詳細ページに移動できるアプリケーションを作成しようとしています。 Ionicが詳細ページがルックブックページの子ページであることも認識しているといいですね。メニューバーに戻るボタンを表示します。

app.config経路設定コード:

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('lookbook.brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

$urlRouterProvider.otherwise('/lookbook'); 

index.html<body>内容:

<ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 

    <ion-nav-title> 
     <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg"> 
    </ion-nav-title> 
    </ion-nav-bar> 

    <ion-nav-view name="main"> 
    </ion-nav-view> 

ルックブックのページが表示されます。しかし、/lookbook/brand-shirtに移動すると、/lookbookに戻ります。 私は行方不明ですか?

答えて

1

このルーティングでは、brand-shirtの状態はlookbook状態の子です(lookbook.brand-shirt)。lookbookの内側に詳細を読み込まないので、そのようにする必要はありません。

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

    $urlRouterProvider.otherwise('/lookbook'); 

そうですか? 'main'ion-nav-viewのビューをプッシュしているので、履歴は同じになります。したがって、/lookbookmainにロードされ、brand-shirtに行くと、その新しいビューはmainビューのスタックに上になります。あなたが戻った場合は、詳細ビューを削除してlookbookに戻ります。

CodePen

+1

あなたのソリューションが動作しますが、子の状態なしで、私はあなたがパラメータとして子状態にオブジェクトを送信することができます –

+0

UI-ルータの解決を経由して、親の解決のパラメータを再利用するか、保存を処理するためにサービスを利用して取得することはできませんオブジェクトの – Hiraqui

関連する問題