Проблема с ui-маршрутизатором в представлениях вызова ионной структуры

Question

У меня есть приложение в ионной среде, по большей части использующее пример вкладок.Однако в одном из представлений я хочу, чтобы пользователь мог щелкнуть элемент и перейти в другое представление на основе этого элемента.

Однако всякий раз, когда вы нажимаете на элемент, он загружает правильное представление, но не вызывает файл шаблона для этого представления.

Вот что у меня есть в маршрутизаторе (обратите внимание, что ненужные разделы опущены)

$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');

В моем контроллере у меня есть:

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

В шаблонах/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>

Тогда вид конкретного элемента выглядит следующим образом:

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

Последнее представление практически не отображается, хотя URL-адрес меняется с tab/account к /tab/account/order/1

Недавно я задал несколько вопросов StackOverflow, касающихся ионизации, прошу прощения, если люди продолжают сталкиваться с ними и совершенно справедливо думают, что я идиот:/

Заранее спасибо!

Answer 1

Вам нужен пользовательский интерфейс в базовом представлении.Когда вы вкладываете состояния, вложенное представление отображается внутри базового представления, где бы у вас ни был элемент ui-view: <div ui-view></div>.