I’m having an issue getting off the ground here with my Ionic app. I have a tabbed view using the following code:
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
<!-- Stores Tab -->
<tab title="Stores" icon="icon ion-map" href="#/tab/stores">
<nav-view name="stores-tab"></nav-view>
</tab>
<!-- Drinks Tab -->
<tab title="Drinks" icon="icon ion-beer" href="#/tab/drinks">
<nav-view name="drinks-tab"></nav-view>
</tab>
</tabs>
I’m using the following as my router:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.stores-index', {
url: '/stores',
views: {
'stores-tab': {
templateUrl: 'templates/stores/index.html',
controller: 'StoresIndexCtrl'
}
}
})
.state('tab.drinks-index', {
url: '/drinks',
views: {
'drinks-tab': {
templateUrl: 'templates/about.html',
controller: 'DrinksIndexCtrl'
}
}
})
And this is the view that contains the slide menu:
<side-menus>
<pane side-menu-content>
<header class="bar bar-header bar-positive">
<button class="button button-icon" ng-click="toggleSlide()"><i class="icon ion-navicon"></i></button>
<h1 class="title">Stores</h1>
</header>
<content has-header="true" padding="true">
</content>
</pane>
<side-menu side="left">
<header class="bar bar-header bar-dark" fade-header>
<h1 class="title">Filters</h1>
</header>
<content has-header="true">
</content>
</side-menu>
</side-menus>
For some reason, when the app loads /tab/stores
on startup, everything is fine. When I navigate the app to /tab/drinks
and attempt to return to /tab/stores
the Stores page will not render. I am firing a console.log
in the controller for that view and it fires fine, so the application knows it is supposed to be on that route, however the view is never produced.
I’ve never worked with Angular UI Router before so maybe I am doing something wrong here. Any help is appreciated, thanks.