Question

你好，我是离子和角度js的新手。我昨天刚刚启动了框架，但我真的陷入了下面的过程。我试图在另一个视图中创建嵌套的选项卡视图。然而，它不起作用。所以这是标签的菜单视图的列表部分：

    <ion-item class="item-icon-left" menu-close href="#/app/browse">
      <i class="icon ion-ios-stopwatch"></i>
      browse
    </ion-item>
    <ion-item class="item-icon-left" menu-close href="#/app/tab">
      <i class="icon ion-ios-calendar"></i>
      tabs
    </ion-item>

这是我的标签视图：

    <ion-view view-title="Tabs">
      <ion-content>
        <ion-tabs class="tabs-icon-top tabs-color-active-positive">
          <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash">
            <ion-nav-view name="tab-dash"></ion-nav-view>
          </ion-tab>
          <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats">
            <ion-nav-view name="tab-chats"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tabs/account">
            <ion-nav-view name="tab-account"></ion-nav-view>
          </ion-tab>


        </ion-tabs>

      </ion-content>
    </ion-view>

用于路由的角度js脚本：

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })    
  .state('app.tab',{
    url: "/tab",
    abstract: true,
    views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })
  .state('app.tab.dash',{
    url: "/dash",
    views: {
      'tab-dash': {
        templateUrl: "templates/tab-dash.html"
      }
    }
  })

从菜单列表中浏览状态正常但是，如果删除其抽象属性，则选项卡状态不会加载上面的脚本，但会加载。更不用说标签的嵌套破折号状态永远不会加载

Answer 1

您是否尝试将代码重新编入Codepen Tabs and Nav example我遇到了类似的问题，但是按照此示例进行了快速修复。

确保你的：

href="#/app/tabs/account"

指向项目的右侧href。如果你有一个codepen我可以深入了解。

Answer 2

您需要进行浏览并选择自己的状态和模板网址。他们不需要成为应用程序状态的子模板..请尝试ffg。修改..

.state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })

  .state('browse', {
    url: "/browse",
    templateUrl: "templates/browse.html",
    controller: 'BrowseCtrl'
  })  

  .state('tab',{
    url: "/tab",
    templateUrl: "templates/tabs.html",
    controller: 'TabsCtrl'
  })

  .state('tab.dash',{
    url: "/dash",
    views: {
      'tab-dash': {
        templateUrl: "templates/tab-dash.html"
      },
    controller: 'DashCtrl'
    }
  })

.state('tab.chats',{
        url: "/chats",
        views: {
          'tab-chats': {
            templateUrl: "templates/tab-chats.html"
          },
    controller: 'ChatsCtrl'
        }
      })

.state('tab.account',{
        url: "/account",
        views: {
          'tab-account': {
            templateUrl: "templates/tab-account.html"
          },
    controller: 'AccountCtrl'
        }
      })

然后为了访问标签..你需要使用这个网址模式 - href =＆＃34;＃/ tab / dash＆＃34;，href =＆＃34;＃/ tab / account＆＃34;等等...

希望这有帮助！：）

Answer 3

有点晚了，但在这里我为此创建了一个codepen。通过使多个子视图共享一个如此名称

，可以在按下或按钮菜单中按下更多详细信息时更新子视图

 views: {
        'shared-child-view' :{
          templateUrl: "[path to your children, in our case child1.html and child2.html]"
        }
      }`

您可以替换或更改视图中的每个子视图，使其具有相同名称的evrey视图，在这种情况下为＆＃34; 共享子状态＆＃ 34;

  <div ui-view name="shared-child-view"></div>

可以使用

点击

<a href="#/sidemenu/parent/child2" class="item">Child View 2
              </a>

如果您使用ui-serf，则无效。

我希望这有助于某人！

使用嵌套选项卡进行离子路由不起作用

3 个答案: