I have created tabs using div style and here is my code:
<div class="bar bar-header bar-positive">
<h1 class="title">Elite Schedule</h1>
</div>
<div class="tabs tabs-icon-top tabs-energized">
<a class="tab-item" ui-sref="home.leagues">
<i class="icon ion-home"></i>
Leagues
<ion-nav-view name="tab-leagues"></ion-nav-view>
</a>
<a class="tab-item" ui-sref="home.myteams">
<i class="icon ion-star"></i>
My Team
<ion-nav-view name="tab-myteams"></ion-nav-view>
</a>
</div>
I don’t get my home.leagues
and home.myteams
content when I click on the tabs. Browser shows me that url changes but nothing else happening. Here is my leagues
and myteam
pages code:
#legues.html
<ion-view>
<ion-content class="has-header">
<h1>Leagues</h1>
</ion-content>
</ion-view>
#mytems.html
<ion-view>
<ion-content class="has-header">
<h1>My Teams</h1>
</ion-content>
</ion-view>
And there is my app.js file:
angular.module("eliteApp", ["ionic"])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
})
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "app/home/home.html"
})
.state('home.leagues', {
url: "/leagues",
view: {
"tab-leagues": {
templateUrl: "app/home/leagues.html"
}
}
})
.state('home.myteams', {
url: "/myteams",
view: {
"tab-myteams": {
templateUrl: "app/home/myteams.html"
}
}
})
.state('app', {
url: "/app",
templateUrl: "app/layout/menu-layout.html"
});
$urlRouterProvider.otherwise('/home/leagues');
})