带不同模板的离子载片

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

我想离子幻灯片内容用不同的模板，馅饼含量=>馅饼。 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', 
     controller: 'HomeCtrl' 
    }, 
    'menuList':{ 
     templateUrl: 'templates/menu/menu.html', 
    } 
    } 
})

来源

2015-12-02 Afrgun

如果它们都使用相同的控制器，我会建议使用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-02 08:19:13

感谢您的回复，可惜我没能在同一个控制器.. :( – Afrgun

在这种情况下，你可以在新的状态，他们每个人联系起来，并使用''标签，而不是 –

我所做加载它们与他们每个人的状态，？请改正我 – Afrgun

我想达到类似的目的，所以我最终做的是使用

<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控制器的根元素。这使您可以为每张幻灯片分别安装控制器。

示例，pie.html的内容。

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

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

来源

2016-03-12 11:20:47

带不同模板的离子载片

回答

相关问题