Question

我有3个离子滑动盒。我的代码是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>

我想要使用不同模板的离子幻灯片内容，饼图内容=＆gt; pie.html，list-all content =＆gt; listall.html，主页内容=＆gt; 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>

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

离子滑动与不同的模板

2 个答案: