在離子嵌套選項卡中路由不起作用

你好，我是新來的離子和角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>

這是我的標籤查看：

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

從菜單：

<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腳本列出瀏覽狀態工作正常但是標籤狀態不會加載上面的腳本，但加載如果我刪除其抽象屬性。更不用說標籤的嵌套短跑狀態永不加載

來源

2015-05-29 sumanthapamagar

+1，面臨同樣的問題。無論如何，我認爲你提到你正在使用的* Ionic版本會很好。 FWIW，我在'1.0.0'上。 –

加入codepen或plunkr plz – aorfevre

即時通訊使用離子1.0.0 – sumanthapamagar

你有沒有試過將你的代碼重新編碼爲Codepen Tabs and Nav example我有一個類似的問題，但下面的例子是一個快速修復。

確保您：

href="#/app/tabs/account"

是指向你的項目的正確HREF。如果你有一個codepen我可以有一個更深入的瞭解。

來源

2015-05-29 14:01:41 FHair

你需要做瀏覽和選項卡他們自己的狀態和模板URL。他們不需要是應用程序狀態的子模板。請嘗試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' 
     } 
     })

然後才能訪問該選項卡..你需要使用這個URL模式 - HREF = 「＃/標籤/破折號」，HREF = 「＃/標籤/賬戶」等。 ..

希望這有助於！ :)

來源

2015-05-29 14:45:07 balfonso

有點晚，但在這裏我創建了一個codepen爲此。當按下按鈕或sidemenu項目有更詳細的codepen內通過使多個子視圖共用一個名字，像這樣

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

您可以替換或更改內部的各個子視圖更新子視圖爲了evrey視圖具有相同的名稱，在這種情況下「共享子狀態」

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

和它可以製成可點擊與

如果使用 ui-serf

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

這行不通。

我希望這可以幫助別人！

來源

2015-12-01 20:26:50 garrettmac

在離子嵌套選項卡中路由不起作用

回答

相關問題