问题离子中的标签不显示内容

我想展示内容。我在自定义模板文件上手动添加了自定义代码。

  <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/

我能够看到标签，但不能看到内容。是的，如果我按照离子的示例应用程序选项卡我能够做到这一点。但我需要一个以上。

我们可以在这里展示内容。

7157

2017-08-07 10:24

起源

你可以尝试在div中的ion-tab内部包含内容或某些元素（<div>我的内容1 </ div>）吗？看起来有些类被添加到ion-tab的子元素中。如果它在那里你也可以尝试没有ion-header-bar - Bharat

我试过这个。还是行不通 - Hitu Bansal

答案:

您必须使用视图来加载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>

有关在离子中设置选项卡的更多信息，还有这个岗位。

2017-08-08 04:38

如果你仔细研究这个例子，你会看到，每个标签条目包含一个 ion-nav-view 每一个 nav-view 实际上是一个 ion-view 同 ion-content 指定其内容。

在您的代码中，制表符元素包含在一个 ion-content 这实际上是相反的方式。

这是一个略微简化的例子 http://codepen.io/anon/pen/XbOLzY

2017-08-07 10:35

是..但我不想使用离子导航视图。在上面的例子中无法做到 - Hitu Bansal

我可以吻你，几个小时都有这个问题，你的答案帮我解决了我的问题。 - user3718908

问题 离子中的标签不显示内容

答案:

热门问题

问题离子中的标签不显示内容