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"
        }
    }
});

Ionic / Angularjs嵌套标签问题

1 个答案: