CODEWITHSUNDEEP
angular-ui-routerionic-framework
gfunk
gfunk

Reputation: 612

Ionic ui-router

I am having an issue using the ui-router with ionic tabs.

When I attempt to transition to a state that is nested within a tab from a separate tab it appears to resolve it in the stateProvider, in terms of entering the resolve statements, but never actually enters the state.

The applicable states are here:

   .state('index', {
      abstract: true,
      templateUrl:'app/main.html',
      controller: 'MainCtrl'
    })
    .state('index.got', {
        url: "/got",
        views: {
            'got-tab': {
                templateUrl: "app/got/main.html",
                controller: 'GotCtrl'
            }
        }
    })
    .state('index.got.listing', {
        url: "/listings/:id",
        templateUrl: "app/got/listing/listing.html",
        controller: "GotListingCtrl",
        resolve: {
            listing: function(Listing, $stateParams) {
                return Listing.get({id: $stateParams.id});
            }
        },
    })
    .state('index.feed', {
      url: "/feed",
      views: {
        'feed-tab': {
             templateUrl: "app/home/feed/feed.html",
             controller: 'FeedCtrl',
             resolve: {
                listings: function(CurrentUser) {
                    return CurrentUser.feed()
                }
            }
        }
      }

And the tabs

<ion-tabs class="tabs-striped tabs-color-positive tabs-icon-top">
    <ion-tab title="Got" ui-sref="index.got.listings">
        <ion-nav-view name="got-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Home" ui-sref="index.feed">
        <ion-nav-view name="feed-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

The call I make to transfer states is

    var index = $state.get('index')
    $state.transitionTo('.got.listing', {id: '1'}, {relative: index})

I assume the issue is because I am dealing with nested names views, but any help would be much appreciated thanks

Upvotes: 1

Views: 750

Answers (1)

Kieran Ryan
Kieran Ryan

Reputation: 591

your resolves Should just be returning the Parameter Information for the current state, so for listing tab:

.state('index.got.listing', {
    url: '/listings/:id,
    templateUrl: '/app/got/listing/listing.html',
    controller: 'GotListingCtrl',
    resolve: {
        listing: ['$stateParams', function($stateParams){
            return $stateParams.id;
        }]
    }
})

Upvotes: 0

Related Questions