ui-router in ionic framework issue

Question

I'm having trouble getting my routes to match up with my views. I have the following routes:

.state('tab.account', {
  url: '/account',
  abstract: true,
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountController'
    }
  }
})
.state('tab.account.order', {
  url: '/order/:id', 
  views: {
    'order-view': {
      templateUrl: 'templates/order-view.html', 
      controller: 'OrderController'
    }
  }
})

I have this in templates/tab-account.html

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

I have this function in the controller for that view:

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

Then finally I have this view for the order:

<ion-view ui-view="orderView" title="Order">
<ion-content class="has-header padding">
    <h1>Your Order</h1>
</ion-content>

The url seems to work, I end up with #/tab/account/order/1 but it doesn't load that final view!

Cheers in advance!

user1234 · Accepted Answer · 2014-07-25 03:30:43Z

The ui-router configuration will depend on what you're trying to do.

It looks like you want the account view and the order view to be on separate pages, in which case you won't want it to be an abstract state, since from the ui-router wiki: "An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to."

I'm not entirely sure you even want a child state for the same reason, since "child states will load their templates into their parent's ui-view." (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views).

If this is the case, then you can do something like this:

.state('tab.account', {
  url: '/account',
  templateUrl: 'templates/tab-account.html',
  controller: 'AccountController'
})
.state('tab.order', {
  url: '/account/order/:id', 
  templateUrl: 'templates/order-view.html', 
  controller: 'OrderController'
})

Here's a plunkr: http://plnkr.co/edit/uuEQcxbWchxQyGV7wMlw?p=preview

The views objects have been removed, since you don't really need them unless you have multiple nested views.

If however you wanted the order view on the same page, then you could do something like this: http://plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL?p=preview

<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>
    <ui-view></ui-view> <!-- Where the child view will load -->
  </ion-content>
</ion-view>

app.js:

.state('tab.account', {
  url: '/account',
  templateUrl: 'tab-account.html',
  controller: 'AccountController'
})
.state('tab.account.order', {
  url: '/order/:id', 
  templateUrl: 'order-view.html', 
  controller: 'OrderController'
})

You'll also probably want to remove your ion-content from the order view template, or else you might get some funky double scroll issues.

Hope this helps! Ui-router is pretty confusing, but their wiki has some great documentation and examples to clear things up.

Ahh!! This is perfect, you've really cleared it up for me. Thank you so much :)

Collectives™ on Stack Overflow

ui-router in ionic framework issue

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related