Dynamic URLs for the

Question

I am the beginner of ionic and is stuck in one stage, I want to use tab view to display different portion of a shopping list and their corresponding urls are

products page: "/list/:listId/products" stores page : "/list/:listId/stores" price page: "/list/:listId/stores"

and the corresponding routes are listed as above

$stateProvider

  //all lists page as the starter point
  .state('allLists', {
    url: '/all-lists',
    templateUrl: 'templates/all-lists.html',
    controller: 'AllListsCtrl'
  })

  //add list page
  .state('addList', {
    url: '/add-list',
    templateUrl: 'templates/add-list.html',
    controller: 'AddListCtrl'
  })

  //tab view for list, abstract state setting up
  .state('list', {
    url: '/list/:listId',
    abstract: true,
    templateUrl: 'templates/list.html'
  })

  //products page for list
  .state('list.products', {
    url: '/products', 
    views: {
      'list-products': {
        templateUrl: 'templates/list-products.html',
        controller: 'ListProductsCtrl'
      }
    }
  })

  //store page for list
  .state('list.stores', {
    url: '/stores',
    views: {
      'list-stores': {
        templateUrl: 'templates/list-stores.html',
        controller: 'ListStoresCtrl'
      }
    }
  })

  //price page for list
  .state('list.price', {
    url: '/price',
    views: {
      'list-price': {
        templateUrl: 'templates/list-price.html',
        controller: 'ListPriceCtrl'
      }
    }
  })

However, in "templates/list.html", I try to do the following things

But the link returned is "#/list//price" and "#/list//stores" So, my question is, how to assign the listId into the elements?

LeftyX · Accepted Answer

This one can be a little bit tricky.

First of all you need to change your abstract state so it does not cache or you might not be able to see the elements in the list, after the first visit:

.state('list', {
    url: '/list/:listId',
    abstract: true,
    cache: false,
    templateUrl: 'list.html',
    controller: 'mainListCtrl'
})

As you can see I've used cache: false.
I've also added a controller cause we need to route the listId:

.controller("mainListCtrl", function($scope, $stateParams){
  $scope.listId = $stateParams.listId;
  $scope.$on('$ionicView.enter', function(e) {
    console.log('mainListCtrl', $stateParams);
  });
})

This controller doesn't do much; it just gets the :listId parameter and saves it in the $scope so it can be read by your list (view).

and this is how your templates/list.html should look like:

Notice I've changed the href to ui-sref cause it gives you better flexibility in terms of knowing which route you're referencing:

ui-sref="list.products({ listId: listId })"
ui-sref="list.stores({ listId: listId })"
ui-sref="list.price({ listId: listId })"

Each one of these references loads the appropriate state (and view) using their name and passing the parameter listId which we have previously saved in the $scope of the controller mainListCtrl (abstract state):

.controller("mainListCtrl", function($scope, $stateParams){
  $scope.listId = $stateParams.listId;
})

I've created a plunker where you can see how it works.

PS: You can try and change the cache to cache: true for the state list and see how the behaviour changes, only showing the first element you have selected in the "All Lists" view.

Dynamic URLs for the <ion-tab>

Answers (1)

Related Questions

Dynamic URLs for the &lt;ion-tab&gt;

Answers (1)

Related Questions

Dynamic URLs for the <ion-tab>