离子滑动与不同的模板 [英] ion-slide with different template

问题描述

我有3个离子滑动盒。
我的代码是github 这里的标签式幻灯片框的实现/ p>

我的代码如下所示：

 < tab-slide-盒> 
< div class =tsb-icons> 
< div class =tsb-ic-wrp> 
< ion-scroll direction =xclass =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 =falseon-slide-changed =slideHasChanged（$ index）> 
< ion-slide> 
< h3>饼图内容< / h3> 
< / ion-slide> 
< ion-slide> 
< h3>列出所有内容< / h3> 
< / ion-slide> 
< ion-slide> 
< h3>主页内容< / h3> 
< / ion-slide> 
< / ion-slide-box> 
  

我想要离子幻灯片内容使用不同的模板，pie content => pie.html，list-all content => listall.html，home content => 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'，
控制器：'HomeCtrl'
}，
'menuList'：{
 templateUrl：'templates / menu / menu.html'，
} 
} 
}）
  

解决方案

如果他们都使用相同的控制器，我建议使用 ng-include

 < ion-slide-box show-pager =falseon-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> 
  

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

解决方案

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>

这篇关于离子滑动与不同的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！