带标签的导航不起作用

Question

我试图在从列表中选择一些项目后导航到选项卡列表。当我尝试运行我的代码时，我得到 Cannot GET /tab/1337 我从列表中选择的内容如下：

<div class="list">
        <a ng-repeat="item in items"
           href="/tab/{{item.queId}}"
           class="item item-thumbnail-left">

我的 app.js 看起来像

 .state('tabs.details', {
    url: "/details/:itemqueId",
    views: {
      'details-tab': {
        templateUrl: "templates/details.html",
         controller: 'FriendDetailCtrl'
      }
    }
  })

   .state('tabs', {
        url: "/tab/:itemqueId",
        abstract: true,
        templateUrl: "templates/tabs.html"
    });

我的 tabs.html 看起来像：

  <ion-view>
 <ion-tabs class="tabs-icon-top">


        <!-- Pets Tab -->
        <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
          <ion-nav-view name="tab-dash"></ion-nav-view>
        </ion-tab>


        <!-- Adopt Tab -->
        <ion-tab title="details" icon="icon ion-heart" href="#/tab/details">
          <ion-nav-view name="tab-details"></ion-nav-view>
        </ion-tab>


      </ion-tabs>
       </ion-view>

不知道是什么问题，希望大家帮忙！

谢谢！

Answer 1

删除 tabs 状态定义中的 abstract: true 行 - 抽象状态无法激活。参见 ui-router docs。

更新：

点击 /tab/1337 时您实际期望发生什么？

可用选项卡

首先，查看当前状态配置，您只有一个有效路由，因为 tab 状态是抽象的：

/tab/:itemqueId/details/:itemqueId

看看 tab.details 它如何将 url 添加到 tab 中，因为它是 tabs 的嵌套状态。因此 /tab/1337 不是有效路线。

您可能正在寻找的是 /tab/:itemqueId/details - 因此将 tab.details 的 url 更改为 url: "/details"

正在链接

在从 angular 范围插入变量时，您应该始终更喜欢使用 ng-href 指令，而不是使用 href 属性。

在这种情况下，我什至建议使用 ui-router 中的 ui-sref 指令。这样您就可以创建带有状态定义的 url 并检查您的定义是否有效。

<a ui-sref="tab.details({ itemqueId: item.queId })">

在 tabs.html 中，您的链接应如下所示以指向同级状态 - 假定 tabs.dash 是类似于 tabs.details:

的有效状态

<!-- Pets Tab -->
<ion-tab title="Dashboard" icon="icon ion-home" ui-sref="^.dash">
  <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>


<!-- Adopt Tab -->
<ion-tab title="details" icon="icon ion-heart" href="^.details">
  <ion-nav-view name="tab-details"></ion-nav-view>
</ion-tab>

带标签的导航不起作用

Navigation with tabs not working

tabs

angularjs

ionic

可用选项卡

正在链接