angularjs – 离子中的标签不显示内容

发布时间：2020-12-17 09:18:04 所属栏目：安全来源：网络整理

导读：我正在尝试展示内容.我在这里手动添加自定义代码在自定义模板文件. ion-contention-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=

我正在尝试展示内容.我在这里手动添加自定义代码在自定义模板文件.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!