I have an app that has 2 tabs on its homepage. The First tabs loads the home items like graphs etc and the second one lists out the books. When a user clicks on the single book item and if he clicks on go back it should be going back to the book list page. Instead it does nothing.
For debugging I tried putting this code right inside the controller but
$ionicTabsDelegate.select(); is not working. I’ve also tried different indexes starting from 0. Is ther anyway to make this work without creating a back button? Pleas help. I’m struggling to solve this issue for more than 2 days.
// These ionicTabsDelegate does not work
$timeout( function() {
$ionicTabsDelegate.select(2,true);
$scope.$apply(function(){
$ionicTabsDelegate.select(2,true);
});
}, 100);
router
.state('app.tabs', {
url: "/tabs",
// url: "/tabs/{id:[a-zA-Z0-9]{1,24}}/{index:[a-zA-Z]{0,12}}",
cache:false,
views: {
'menuContent': {
templateUrl: "templates/tabs.html",
controller: 'tabsController'
}
}
})
.state('app.singleview', {
url: '/singleview/:slug/:type/:id',
views: {
'menuContent': {
templateUrl: 'templates/sections/single.html',
controller: 'SectionSingleCtrl'
}
}
})
tabs.html
<ion-view >
<ion-nav-buttons side="right">
</ion-nav-buttons>
<ion-nav-buttons side="secondary">
<button ui-sref="app.settings" class="bar-sidemenu bar-button icon-settings"></button>
</ion-nav-buttons>
<ion-nav-title class="logo">
<img ng-src="img/logo.png" style="height: 90%;">
</ion-nav-title>
<ion-tabs tabs-top class="tabs-news" >
<ion-tab title="Home" icon="ion-home" on-select="selectTabWithIndex()">
<ion-pane ng-controller="HomeCtrl">
<ion-content class="home-content">
<ion-refresher on-refresh="doRefresh()" spinner="none" pulling-icon="ion-refresh"></ion-refresher>
<div ng-include="'templates/on_tabs/home.html'"></div>
<ion-infinite-scroll ng-if="!over" on-infinite="load()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</ion-tab>
<ion-tab title="Books">
<ion-pane ng-controller="BooksCtrl" on-select="selectTabWithIndex()">
<ion-content class="home-content">
<ion-refresher on-refresh="doRefresh()" spinner="none" pulling-icon="ion-refresh"></ion-refresher>
<div ng-include="'templates/on_tabs/books.html'"></div>
<ion-infinite-scroll infinite-scroll-disabled='busyLoadingData' ng-if="!over" on-infinite="load()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</ion-tab>
<ion-tab title={title} hidden="true">
<ion-nav-view name="section"></ion-nav-view>
</ion-tab>
<ion-tab hidden="true">
<ion-nav-view name="sectionview"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
TabsController
.controller('tabsController', function($timeout,$ionicTabsDelegate,$state,$stateParams,$localStorage,$ionicHistory,$rootScope,$scope,base64, $http, $ionicScrollDelegate,$ionicSideMenuDelegate){
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
$rootScope.showLeftButton = true;
});
if(angular.isDefined($localStorage.login)){
}else{
$ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });
$state.go('app.guesthome');
}
})
BooksCtrl
.controller('BooksCtrl', function($state,$scope, $http){
//code to fetch books here
})
books.html
<div class="row xposts" ng-repeat="item in posts as count">
<div class="row news" ui-sref="app.singleview({slug:item.slug,type:item.type,id:item.id})">
<div class="col col-33">
<img ng-src="{{item.better_featured_image.media_details.sizes.medium.source_url || 'img/no_images.png'}}" class="img" />
</div>
<div class="col">
<b ng-bind-html="item.title.rendered"></b>
</div>
</div>
</div>
SectionSingleCtrl
.controller('SectionSingleCtrl', function(
$rootScope,$scope, $http, $sce,
$state, $stateParams, $ionicPopover, $localStorage,
$ionicPopup,
IonicClosePopupService, $ionicHistory,$location,$ionicTabsDelegate,$timeout){
$scope.$sce = $sce;
$scope.incategory = [];
$scope.page = 1;
// These ionicTabsDelegate does not work
$timeout( function() {
$ionicTabsDelegate.select(2,true);
$scope.$apply(function(){
$ionicTabsDelegate.select(2,true);
});
}, 100);
// ^^ These ionicTabsDelegate does not work
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
$scope.showLeftButton = false;
});
$scope.id = $stateParams.id;
$scope.slug = $stateParams.slug;
$scope.type = $stateParams.type;
})