Problema dell'interfaccia utente nel quadro Ionico Le viste chiamate

Question

Ho un'app in framework ionico utilizzando l'esempio delle schede per la maggior parte.Tuttavia in uno dei punti di vista, voglio che l'utente sia in grado di fare clic su un oggetto e andare in un'altra vista in base a quell'elemento.

Tuttavia, ogni volta che fai clic su un elemento, carica la visualizzazione corretta, ma non chiama il file del modello per quella vista.

Ecco cosa ho nel mio router (nota le sezioni non rilevanti sono lasciate fuori)

$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.Atherwise ('/ Tab / Dash');

Nel mio controller ho:

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

.

In Modelli / Tab-Account.html Ho:

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

.

.

Quindi la visualizzazione specifica dell'oggetto è come segue:

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

.

L'ultima vista in pratica non appare, anche se l'URL cambia da tab/account a /tab/account/order/1

Ho chiesto ad alcune domande di Stackoverflow per quanto riguarda ionic di recente, ci scusiamo se le persone continuano a incontrarle e giustamente pensano di essere un idiota: /

Grazie in anticipo!

Answer 1

Hai bisogno di una visione dell'interfaccia utente nella tua vista base.Quando si annida gli stati, la vista annidata viene visualizzata all'interno della vista base ovunque tu abbia un elemento di visualizzazione UI: <div ui-view></div>.