0

我有 3 个离子滑块。我的代码是这里github 上选项卡式幻灯片框的实现

我的代码如下所示：

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

我想要具有不同模板的 ion-slide 内容，饼图内容 => 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',
    }
  }
})
4

2 回答 2

3

如果他们都使用相同的控制器，我建议使用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>
于 2015-12-02T08:19:13.133 回答
1

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

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

还删除配置功能中各个幻灯片的所有状态。

于 2016-03-12T11:20:47.117 回答