angularjs - Routing in ionic with nested tabs does not work -
hello new both ionic , angular js. started framework yesterday stuck in process below. trying create nested tab views inside view. it's not working. listing part menu view tabs:
<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>
this tabs view:
<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>
the angular js script routing:
.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" } } })
from menu list browse state works fine tabs state not load above script loads if remove abstract property. not mention nested dash state of tabs never loads
have tried refitting code codepen tabs , nav example had similar problem following example quick fix.
make sure your:
href="#/app/tabs/account"
are pointing right href project. if have codepen can have deeper look.
Comments
Post a Comment