Número de UI-Router en vistas de llamadas marco iónico

Question

Tengo una aplicación en el marco iónico utilizando el ejemplo de las pestañas en su mayor parte.Sin embargo, en una de las opiniones, quiero que el usuario pueda hacer clic en un elemento e ir a otra vista en función de ese elemento.

Sin embargo, siempre que haga clic en un elemento, cargue la vista correcta, pero no llame al archivo de plantilla para esa vista.

Esto es lo que tengo en mi enrutador (las secciones no relevantes no se dejan afuera)

$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.ESTERO ('/ TAB / DASH');

en mi controlador tengo:

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

en plantillas / tab-cuenta.html tengo:

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

Luego, la vista específica del artículo es la siguiente:

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

que la última vista básicamente no aparece, a pesar de que la URL cambia de tab/account a /tab/account/order/1

He formulado algunas preguntas de STACKOVERFLOW con respecto a IONIC recientemente, disculpas si las personas siguen avanzando y, con razón, creo que soy un idiota: /

¡Gracias de antemano!

Answer 1

Necesita una vista en interfaz de usuario en su vista de base.Cuando anidan estados, la vista anidada se muestra dentro de la vista base donde sea que tenga un elemento de vista de usuario: <div ui-view></div>.