ui-router issue in ionic framework calling views

Question

I have an app in ionic framework using the tabs example for the most part. However in one of the views, I want the user to be able to click an item and go into another view based on that item.

However, whenever you click on an item, it loads the correct view, but doesn't call the template file for that view.

Here's what I have in my router (note non-relevant sections are left out)

$stateProvider.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
}).state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'LoginController'
    }
  }
}).state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'templates/friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
}).state('tab.buy', {
  url: '/buy',
  views: {
    'tab-buy': {
      templateUrl: 'templates/buy.html', 
      controller: 'PaymentController'
    }
  }
}).state('tab.account', {
  url: '/account',
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountController'
    }
  }
}).state('tab.order', {
  url: '/account/order/:id', 
  views: {
    'tab-order': {
      templateUrl: 'templates/order-view.html', 
      controller: 'OrderController'
    }
  }
})

$urlRouterProvider.otherwise('/tab/dash');

In my controller I have:

$scope.viewOrder = function(id) {   
    $state.go('tab.order', {id:id});
};

In templates/tab-account.html I have:

<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>

<h2>Your orders</h2>

<div class="card" ng-repeat="booking in bookings">
  <div class="item item-text-wrap">
    <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
  </div>
</div>

Then the item specific view is as followed:

<ion-view title="Order">
  <ion-content class="has-header padding">
      <h1>Your Order</h1>
      <p>Test</p>
      Order #: {{orderNumber}}
  </ion-content>
</ion-view>

That last view basically doesn't appear, even though the url changes from tab/account to /tab/account/order/1

I've asked a few StackOverflow questions regarding ionic recently, apologies if people keep coming across them and quite rightly think I'm an idiot :/

Thanks in advance!

Answer 1

You need a ui-view in your base view. When you nest states, the nested view is displayed inside the base view wherever you have a ui-view element: <div ui-view></div>.