Angularjs 无法使离子标签工作_Angularjs_Ionic Framework_Ionic

Angularjs 无法使离子标签工作

angularjs ionic-framework

Angularjs 无法使离子标签工作,angularjs,ionic-framework,ionic,Angularjs,Ionic Framework,Ionic,我试图像中那样设置选项卡，但正如您所看到的，没有显示任何内容。我有： <ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view> <ion-nav-buttons side="right"> <button class=

我试图像中那样设置选项卡，但正如您所看到的，没有显示任何内容。我有：

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view>
    <ion-nav-buttons side="right">
        <button class="button" ng-click="done()">
            Done
        </button>
    </ion-nav-buttons>
</ion-nav-view>
<ion-tabs class="tabs-positive tabs-icon-only">

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
        Content of One
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
        Content of Two
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        Content of Three
    </ion-tab>

</ion-tabs>

如果我选择主页，其中一个内容不会显示。我刚从官方那里复制了代码：。此外，我的ion导航按钮没有显示在ion导航栏中

我的代码有什么问题

是否可以将选项卡置于屏幕顶部？我不要底部，我要顶部。如果可能，我还需要更改颜色和透明度。

在代码笔中，没有用于路由的脚本，没有它选项卡将无法工作。ion选项卡的文档可能会产生误导，因为它只显示html部分

你基本上有两种方法来获得一个有效的离子标签。一个是使用选项卡创建新的ionic项目：

ionic start myApp tabs

在这个项目中，您可以看到实施良好的选项卡，并根据需要对其进行定制

或者你可以浏览它的源代码，看看它是如何实现的。源代码如下：

祝你好运

正如Bipin Bhandari所建议的，您的代码中缺少了一些东西。在某些情况下，您可能需要使用路由和控制器

话虽如此，您可以使用以下代码简单地呈现带有选项卡的页面：

<body ng-app="starter">

    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-nav-view>
                <ion-content>
                    Content of One
                </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <ion-nav-view>
                <ion-content>
                    Content of Two
                </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-nav-view>
                <ion-content>
                    Content of Three
                </ion-content>
            </ion-nav-view>
        </ion-tab>
    </ion-tabs>

</body>

以及添加包含视图和选项卡的html页面：

<ion-view view-title="home">

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top">

        <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
            <ion-nav-view name="tab-1">
              <ion-content padding="true" has-header="true">
                  <h1>HOME</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-nav-view name="tab-2">
              <ion-content padding="true" has-header="true">
                  <h1>SETTINGS</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
            <ion-nav-view name="tab-3">
              <ion-content padding="true" has-header="true">
                  <h1>INFO</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

    </ion-tabs>

</ion-view>

如果你想看看它是如何工作的，这应该可以。

这正是我想要的。我不想我的标签有任何路由。当我在标签页之间切换时，应用程序中有一个backbackback是完全不符合逻辑的。谢谢。有点同意你：-干杯。@Mulgard:用更多信息更新了我的答案。代码笔也更新了。你好，我的朋友。我注意到这个解决方案有一个问题。当我现在在我的标签视图中按下后退按钮时，它会后退两次而不是一次。你知道为什么吗？这就是为什么你可能想要集成状态的原因。各州使用历史。你没有做这些事情。

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>  

<ion-nav-view></ion-nav-view>

$stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'homeController',
    });

<ion-view view-title="home">

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top">

        <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
            <ion-nav-view name="tab-1">
              <ion-content padding="true" has-header="true">
                  <h1>HOME</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-nav-view name="tab-2">
              <ion-content padding="true" has-header="true">
                  <h1>SETTINGS</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
            <ion-nav-view name="tab-3">
              <ion-content padding="true" has-header="true">
                  <h1>INFO</h1>
              </ion-content>
            </ion-nav-view>
        </ion-tab>

    </ion-tabs>

</ion-view>