Блог

У меня есть приложение, использующее шаблон ионных вкладок как так:

  // setup an abstract state for the tabs directive
   .state('tab', {
    url: '/tab',
     abstract: true,
     templateUrl: 'templates/tabs.html',
  })

   // Each tab has its own nav history stack:
   .state('tab.trips', {
     url: '/trips',
     views: {
       'tab-trips': {
          templateUrl: 'templates/trips.html',
          controller: 'TripsCtrl',
        }
      }
    })

.state('tab.trip-detail', {
    url: '/trips/:tripId',
    views: {
      'tab-trips': {
        templateUrl: 'templates/trip-detail.html',
        controller: 'DestinationCtrl',
      }
    }
  })
 

Здесь у нас есть абстрактное состояние «вкладка», затем первое основное представление в «tab.trips» и его подробное представление «tab.trip-detail».

Внутри подробного представления «tab.trip-detail» я хочу иметь возможность отображать разные шаблоны для разных состояний в этом представлении.

Не уверен, как настроить состояния для этого.

Да, конечно, вы можете это сделать. Я предлагаю вам использовать ng-include :

Примеры кодов, на которые вы можете ссылаться:

 <ion-pane>
    <ion-tabs>
        <ion-tab title="Tab 1"...>
            <ion-view>
                <div ng-include src="'templates/tab1.html'"></div> <!-- You can manipulate this source -->
            </ion-view>
        </ion-tab>
        <ion-tab title="Tab 2"... >
            <ion-view>
                <div ng-include src="'templates/tab2.html'"></div> <!-- You can manipulate this source -->
            </ion-view>
        </ion-tab>
    </ion-tabs>
</ion-pane>