我正在尝试展示内容.我在这里手动添加自定义代码在自定义模板文件.
<ion-content>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
My Content here
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
My Content here 1
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
My Content here 3
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
我从这里拿了示例代码
http://ionicframework.com/docs/api/directive/ionTabs/
您必须使用视图来加载tabs指令中的内容.路由状态使用视图的名称放置将驻留在该选项卡内的内容.
// Notice the referenced view is "home-tab"
.state('tabs.home',{
url: "/home",views: {
'home-tab': {
templateUrl: "templates/home.html",controller: 'HoMetabCtrl'
}
}
})
// Which correlates to the name of the view,which is also "home-tab"
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
您可以使用模板在同一个文件(如示例中)中轻松添加它,该模板将路由的templateUrl与标记中模板的id相关联：
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
// Your content
</p>
</ion-content>
</ion-view>
</script>
有关更多有关设置离子选项卡的信息,还有这个post.
