帶不同模板的離子載片

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

帶不同模板的離子載片

回答

相關問題