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!

Ben Wilde · Accepted Answer · 2014-07-28 22:27:30Z

2

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>.

answered Jul 28, 2014 at 22:27

Ben Wilde

5,7023 gold badges43 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Wilde Over a year ago

You can also name nested views in order to display multiple nested views. e.g. <div ui-view="name"></div>, and then specify multiple named views for a state. See github.com/angular-ui/ui-router/wiki/Multiple-Named-Views . Pretty cool stuff.

Collectives™ on Stack Overflow

ui-router issue in ionic framework calling views

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related