Ion-tabs not working. Empty page


#1

Hi,

I can not get ion-tabs working. Here I attach my code:

app.js:
.state(‘app.blog’, {
url: “/blog”,
abstract: true,
templateUrl: “templates/blog_tabs.html”
})
.state(‘app.blog.blog_main’, {
url: ‘/blog/blog_main’,
views: {
‘blog-main’: {
templateUrl: ‘templates/blog_main.html’,
controller: ‘BlogCtrl’
}
}
})
.state(‘app.blog.blog_sources’, {
url: ‘/blog/blog_sources’,
views: {
‘blog-sources’: {
templateUrl: ‘templates/blog_sources.html’,
controller: ‘SourcesCtrl’
}
}
})
.state(‘app.blog.blog_favorites’, {
url: ‘/blog/blog_favorites’,
views: {
‘blog-favorites’: {
templateUrl: ‘templates/blog_favorites.html’,
controller: ‘BlogFavoritesCtrl’
}
}
})

The default routeProvider:

$urlRouterProvider.otherwise('/app/blog/blog_main');

blog_tabs.html:
<ion-tabs class="tabs-icon-top"> <ion-tab icon="ion-home" title="All" href="#/blog/blog_main"> <ion-nav-view name="blog-main"></ion-nav-view> </ion-tab> <ion-tab icon="ion-android-apps" title="Sources" href="#/blog/blog_sources"> <ion-nav-view name="blog-sources"></ion-nav-view> </ion-tab> <ion-tab icon="ion-android-favorite" title="Favoites" href="#/blog/blog_favorites"> <ion-nav-view name="blog-favorites"></ion-nav-view> </ion-tab> </ion-tabs>

and one ion-tab blog_main.html:
<ion-view title="News"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-icon button-clear ion-ios-search" ng-click="toggleSearchBar()"></button> </ion-nav-buttons> <ion-content> <ion-refresher pulling-text="Refresh News..." on-refresh="init(true)"></ion-refresher> <div class="card" ng-repeat="post in blog_post track by $index"> <div class="item item-avatar item-icon-right"> <img ng-src="{{source[post.author]}}"> <h2>{{post.title.rendered}}</h2> <h3><b>Source from</b>: {{post.author_name}}</h3> <small>Posted on {{post.date}}</small> <button class="button button-clear icon ion-star" ng-style="{color : post.isFavorited?'#AA1100':'#C7C7C7'}" ng-click="toggleStar(post, this)"></button> </div> <div class="item item-body"> <a href="#/app/post/{{post.slug}}"> <img class="full-image" ng-src="{{post.featured_image}}"> </a> <div style="margin-top:10px" ng-bind-html="post.excerpt"></div> </div> </div> <ion-infinite-scroll distance="2%" on-infinite="loadMorePost()" ng-if="moredata"></ion-infinite-scroll> </ion-content> </ion-view>

The fact is that nothing is shown in the default page. I do not understand where is the error.

Any idea?