UI-Router-Problem in ionischen Framework-Aufrufansichten

Question

Ich habe eine App im ionischen Framework, die größtenteils das Tabs-Beispiel verwendet.In einer der Ansichten möchte ich jedoch, dass der Benutzer auf ein Element klicken und basierend auf diesem Element in eine andere Ansicht wechseln kann.

Wenn Sie jedoch auf ein Element klicken, wird die richtige Ansicht geladen, die Vorlagendatei für diese Ansicht wird jedoch nicht aufgerufen.

Folgendes habe ich in meinem Router (beachten Sie, dass nicht relevante Abschnitte weggelassen wurden)

$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 meinem Controller habe ich:

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

In templates/tab-account.html habe ich:

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

Dann sieht die artikelspezifische Ansicht wie folgt aus:

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

Diese letzte Ansicht wird im Grunde nicht angezeigt, auch wenn sich die URL von ändert tab/account Zu /tab/account/order/1

Ich habe in letzter Zeit ein paar StackOverflow-Fragen zu ionic gestellt. Es tut mir leid, wenn die Leute immer wieder darauf stoßen und zu Recht denken, ich sei ein Idiot :/

Dank im Voraus!

Answer 1

Sie benötigen eine UI-Ansicht in Ihrer Basisansicht.Wenn Sie Zustände verschachteln, wird die verschachtelte Ansicht überall dort in der Basisansicht angezeigt, wo Sie ein ui-view-Element haben: <div ui-view></div>.