Angularjs ionic中的选项卡未显示内容
我正在努力展示自己的内容。我在自定义模板文件中手动添加了自定义代码Angularjs ionic中的选项卡未显示内容,angularjs,ionic-framework,ionic,Angularjs,Ionic Framework,Ionic,我正在努力展示自己的内容。我在自定义模板文件中手动添加了自定义代码 <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-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>
我的内容在这里
我在这里的内容1
我的内容在这里3
我从这里获取了示例代码
我可以看到标签,但看不到内容。是的,如果我遵循爱奥尼亚的示例应用程序标签,我就能做到这一点。但我需要一个以上的
我们可以在这里显示内容吗 如果仔细研究该示例,您会发现,每个选项卡条目都包含一个
ion导航视图
,每个nav视图
实际上是一个ion视图
,具有指定其内容的ion内容
在您的代码中,选项卡元素被包装在一个ion content
中,这实际上是相反的方式
下面是一个稍微简化的示例
您必须使用视图来加载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>
//注意,引用的视图是“主页选项卡”
.state('tabs.home'{
网址:“/home”,
观点:{
“主页选项卡”:{
templateUrl:“templates/home.html”,
控制器:“HomeTabCtrl”
}
}
})
//它与视图的名称相关,也就是“主选项卡”
您可以使用模板轻松地将其添加到同一文件中(如示例中所示),该模板使用路由的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>
//你的内容
有关在ionic中设置选项卡的详细信息,请参阅。yes。。但我不想使用离子导航视图。在上面的例子中无法完成我可以吻你,这个问题已经困扰了几个小时,你的回答帮助解决了我的问题。你能尝试将ion选项卡中的内容包装到div或某个元素(我的内容在这里1)中吗?看起来有些类被添加到了ion选项卡的子元素中。你也可以尝试不带离子标题栏,如果它在那里,我试过这个。仍然不起作用