Ionic/Angularjs 嵌套标签问题

Question

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

这是我的密码笔：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 页结束，我不知道为什么。有谁知道我做错了什么？

谢谢！

Answer 1

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

您为第 1 页和第 2 页重复了 about-page。为第 2 页状态执行此操作

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