不同模板的离子载玻片

Question

我有 3 个 ion-slide-box。我的代码是 github here

上的选项卡式幻灯片框的实现

我的代码如下所示：

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

我想要不同模板的离子幻灯片内容，馅饼内容=> pie.html，列出所有内容=> listall.html，主页内容=> home.html。

但是我不知道怎么做，有什么建议吗？提前致谢

顺便说一下，我阅读了这篇文章 API attr=name ion-nav-view 并查看了示例。

并且我添加了这段代码：

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

这个州的家：

.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',
    }
  }
})

Answer 1

如果他们都使用同一个控制器，我建议使用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>

Answer 2

我想实现类似的东西，所以我最终做的是使用

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

Kashyap Mukkamala 提供了相同的结构，尽管在每个模板中都添加了一个根元素，每个视图都有一个 ng-controller。这允许您为每张幻灯片设置单独的控制器。

示例，pie.html.

的内容

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

同时删除配置函数中单个幻灯片的所有状态。

不同模板的离子载玻片

ion-slide with different template

angularjs

ionic-framework

ionic

ionic-view