Ionic/Angularjs 嵌套选项卡问题

Ionic/Angularjs nested tabs issue

本文关键字：问题 选项 嵌套 Angularjs Ionic      更新时间：2023-09-26

>我在尝试让我的应用程序导航工作时遇到了一些问题。我有一组选项卡嵌套在另一组选项卡中。但是，当我单击主导航的高级选项卡时，我尝试将其设置为第二级选项卡中的第一个视图，但是它似乎遍历所有选项卡两次，并在最后一个选项卡上结束。

这是我的代码笔：http://codepen.io/anon/pen/MYWvgj?editors=101

主级别选项卡：

<ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
            <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>
</ion-tabs>

第二级选项卡：

<ion-tabs class="tabs-striped tabs-top tabs-background-stable">
          <ion-tab title="Page 1" ui-sref="tabs.about.page1" on-select="page1()">
            <ion-nav-view name="about-page"></ion-nav-view>
          </ion-tab>
          <ion-tab title="Page 2" ui-sref="tabs.about.page2" on-select="page2()">
            <ion-nav-view name="about-page"></ion-nav-view>
          </ion-tab>
  </ion-tabs>

关于视图：

<script id="templates/about-page1.html" type="text/ng-template">
    <ion-view title="About Page 1">
        <ion-content class="padding has-tabs-top">
            About Page 1
        </ion-content>
    </ion-view>
</script>
<script id="templates/about-page2.html" type="text/ng-template">
    <ion-view title="About Page 2">
        <ion-content class="padding has-tabs-top">
            About Page 2
        </ion-content>
    </ion-view>
</script>

以下是重要的状态：

.state('tabs.about', {
    url: "/about",
    abstract: true,
    views: {
        'about-tab': {
            templateUrl: "templates/about.html"
            controller: "tabController"
        }
    }
})
.state('tabs.about.page1', {
    url: "/page1",
    views: {
        'about-page': {
            templateUrl: "templates/about-page1.html"
        }
    }
})
.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

我正在谈论的示例是单击"关于"选项卡，它设置为呈现第 1 页，但由于某种原因，它总是出现在第 2 页，我不确定为什么。有人知道我做错了什么吗？

谢谢！

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

您重复了第 1 页和第 2 页的关于页面。对第 2 页状态执行此操作

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page2': {
            templateUrl: "templates/about-page2.html"
        }
    }
});
相关文章：