ion-slide with different template

问题

I have 3 ion-slide-box. My code is an implementation of tabbed slide box on github here

My Code look like this:

<tab-slide-box>
 <div class="tsb-icons">
    <div class="tsb-ic-wrp">
       <ion-scroll direction="x" class="tsb-hscroll">
           <a href="javascript:;" class="header-icon ion-pie"></a>
           <a href="javascript:;" class="header-icon ion-list-all"></a>
           <a href="javascript:;" class="header-icon ion-home-omg"></a>
        </ion-scroll>
     </div>
</div>

 <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
      <ion-slide>
         <h3>Pie content</h3>
      </ion-slide>
      <ion-slide>
          <h3>List all content</h3>
      </ion-slide>
      <ion-slide>
           <h3>Home content</h3>
      </ion-slide>
  </ion-slide-box>

i want ion-slide content with different templates, pie content => pie.html, list-all content => listall.html, home content => home.html.

but I do not know how to make it, any suggestions for me ? Thanks in advance

by the way, i read this article API attr=name ion-nav-view and see example.

and i have added this code:

<ion-slide>
   <ion-nav-view name="home-index"></ion-nav-view>
</ion-slide>

and this state for home :

.state('app.home', {
  cache: false,
  url: "/home",
  views: {
    'home-index':{
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    },
    'appContent':{
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    },
    'menuList':{
      templateUrl: 'templates/menu/menu.html',
    }
  }
}) 

回答1:

If they all use the same controller, I would suggest using ng-include

  <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
      <ion-slide>
        <div ng-include="'pie.html'"></div>
      </ion-slide>
      <ion-slide>
         <div ng-include="'listall.html'"></div>
      </ion-slide>
      <ion-slide>
        <div ng-include="'home.html'"></div>
      </ion-slide>
  </ion-slide-box>

回答2:

I wanted to achieve something similar, so what I ended up doing was use

<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
      <ion-slide>
        <div ng-include="'pie.html'"></div>
      </ion-slide>
      <ion-slide>
         <div ng-include="'listall.html'"></div>
      </ion-slide>
      <ion-slide>
        <div ng-include="'home.html'"></div>
      </ion-slide>
  </ion-slide-box>

This same structure provided by Kashyap Mukkamala, although in every template add a root element having a ng-controller for each view. This allows you to have separate controllers for every slide.

example , contents of the pie.html.

<ion-view ng-controller="PieCtrl">
<!-- Your HTML -->
</ion-view>

also remove all the states for individual slides in config function.

来源：https://stackoverflow.com/questions/34037664/ion-slide-with-different-template