I have three tabs that contain a Google Map, and two RSS feeds respectively. When the app first loads, the first tab which contains the Google Map loads perfectly but when I change to another tab, the RSS feed does not load. When I change back to the first tab again, the Map does not load.
I am new to Ionic and Angular and am having a problem figuring out where the issue is. It’s as if the javascript only loads for the first tab, and does load for the subsequent tabs. Here is my html:
<body ng-app="appBody">
<ion-tabs class="tabs-icon-only">
<ion-tab title="Map" icon="ion-map" on-select="drawMap()">
<header class="bar no-style cyan">
<h1 class="title">Map</h1>
</header>
<ion-content>
<h1>Map</h1>
<div id="map-canvas">Loading map...</div>
<p id="geolocation">Watching geolocation...</p>
</ion-content>
</ion-tab>
<ion-tab title="News" icon="ion-information-circled" >
<header class="bar no-style cyan">
<h1 class="title">News</h1>
</header>
<ion-content>
<h1>News</h1>
<p>This is a news feed</p>
<div id="rss-news-feed"></div>
</ion-content>
</ion-tab>
<ion-tab title="Events" icon="ion-calendar" >
<header class="bar no-style cyan">
<h1 class="title">Events</h1>
</header>
<ion-content>
<h1>Events</h1>
<p>This is what's on</p>
<div id="rss-events-feed"></div>
</ion-content>
</ion-tab>
</ion-tabs>
</body>
And the only Ionic javascript I have (I’ve left out the code for the Map):
angular.module('appBody', ['ionic']);
Is there a way to fire the relevant code each time a tab is selected? I’ve tried using the on-select attribute but it didn’t seem to work.
Thanks for your help.