Hello, I have a weird problem is the Back button on Navigation bar disappear if the entry point of the view is by pass certain page.
My case is
Everything start with “Home” page. And I have a “brand” page and a “product” page.
Case 1
Home -> Product (No Problem)
Home -> Brand -> Product (Back icon will be fade out at Product page in such case)
I am not sure which part goes wrong. I checked app.js, code pattern and some sample project on github.
Anyone encounter similar problem before?
Could you build a codepen?
Your routings/states - definition would be interesting.
That the backbutton disappears, if ionic thinks you are navigating back to the “Home” page because it is the “first” entry in nav-history… or you clearing the nav-history in some cases or manipulating the history-stack with the $ionicViewService?
Greetz,bengtler
Hi Bengtler, I am not very familiar codepen, as well as HTML actually. I break down different views in different file and not sure how to group them up in group pen. Anyway … according to my understanding, there are three factors could control the “back” button.
I don’t know about $ionicViewService before you mention. So I assume there is something wrong with my Brand page html （case 2) or routing states (case 3).
And here is the related code.
For Homepage (This is a bit hardcode because I don’t know how to control the collectionview yet)
<ion-view title="TmpTitle" ng-controller="HomeCtrl">
<ion-content class="has-header" style="margin-bottom:-5px;">
<span ng-if="homeItems.length>0">
<!-- Big Block -->
<div class="row">
<div class="col" style="width:{{homeItems[0].width}}px; height:{{homeItems[0].height}}px; background-color:gray;">
<a href="#/app/brandList">
{{homeItems[0].name}}
<img href="#/app/playlists" src="{{homeItems[0].thumbnail}}"></img>
</a>
</div>
</div>
<!-- Big Block -->
<div class="row">
<div class="col" style="width:{{homeItems[1].width}}px; height:{{homeItems[1].height}}px; background-color:gray;" >
<a href="#/app/productList/{{homeItems[1].slug}}" ng-click="tapOnBlock('{{homeItems[1].name}}')">
{{homeItems[1].name}}
<img src="{{homeItems[1].thumbnail}}"></img>
</a>
</div>
</div>
<!-- Small Block -->
<div class="row">
<div class="col" style="width:{{homeItems[2].width}}px; height:{{homeItems[2].height}}px; background-color:gray;">
<a href="#/app/productList/{{homeItems[2].slug}}" ng-click="tapOnBlock('{{homeItems[2].name}}')">
{{homeItems[2].name}}
<img src="{{homeItems[2].thumbnail}}"></img>
</a>
</div>
<div class="col" style="width:{{homeItems[3].width}}px; height:{{homeItems[3].height}}px; background-color:gray;">
<a href="#/app/productList/{{homeItems[3].slug}}" ng-click="tapOnBlock('{{homeItems[3].name}}')">
{{homeItems[3].name}}
<img src="{{homeItems[3].thumbnail}}"></img>
<a/>
</div>
</div>
<!-- Small Block -->
<div class="row">
<div class="col" style="width:{{homeItems[4].width}}px; height:{{homeItems[4].height}}px; background-color:gray;">
<a href="#/app/productList/{{homeItems[4].slug}}" ng-click="tapOnBlock('{{homeItems[4].name}}')">
{{homeItems[4].name}}
<img src="{{homeItems[4].thumbnail}}"></img>
</a>
</div>
<div class="col" style="width:{{homeItems[5].width}}px; height:{{homeItems[5].height}}px; background-color:gray;">
<a href="#/app/productList/{{homeItems[5].slug}}" ng-click="tapOnBlock('{{homeItems[5].name}}')">
{{homeItems[5].name}}
<img src="{{homeItems[5].thumbnail}}"></img>
</a>
</div>
</div>
</span>
</ion-content>
</ion-view>
For brand page
<ion-view title="Brands">
<ion-content start-y="55" class="has-header">
<div id="search-box" class="bar bar-header item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="data.searchQuery">
<i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i>
</div>
<button class="button button-clear" ng-click="clearSearch()">Cancel</button>
</div>
<ion-list>
<div ng-repeat="index in brandIndex">
<ion-item class="item-divider"
ng-show="data.searchQuery=='' || data.searchQuery==null">
{{index}}
</ion-item>
<ion-item nav-clear ui-sref='app.productListCategories({categories: "brands", slug: "octopus"})' ng-repeat="brand in brandItems[index] | filter:{name:data.searchQuery}">
{{brand.name}}
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
For Product page
<ion-view title={{navTitle}}>
<!-- The Filter bar -->
<ion-pane style="top:44px; height:80px">
<div class="button-bar item">
<a class="button" ng-repeat="filterTitle in filtersTitles">{{filterTitle}}</a>
</div>
</ion-pane>
<ion-content style="top:120px;" class="has-header">
<!--div style="top:44px;" ng-include src="'templates/filterBar.html'"></div-->
<div class="item"
collection-repeat="product in productsData"
collection-item-width="'50%'"
collection-item-height="'30%'"
ui-sref='app.productListCategories({categories: "brands", slug: "octopus"})'>
{{product.brand.name}}{{product.price}}
<img href="#/app/playlists" src="{{product.images[0].mediumURL}}"></img>
</div>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="10%">
</ion-infinite-scroll>
</ion-content>
</ion-view>
For states
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
// ========= App page start from here ======== //
// Homepage
.state('app.home', {
url: '/home',
views: {
'menuContent' :{
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
// List of Brands
.state('app.brandList', {
url: '/brandList',
views: {
'menuContent' :{
templateUrl: 'templates/brandList.html',
controller: 'BrandsListCtrl'
}
}
})
//Product list
.state('app.productListSlug', {
url: '/productList/:slug',
views: {
'menuContent' :{
templateUrl: 'templates/productList.html',
controller: 'ProductListCtrl'
}
}
})
.state('app.productListCategories', {
url: '/productList/:categories/:slug',
views: {
'menuContent' :{
templateUrl: 'templates/productList.html',
controller: 'ProductListCtrl'
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});The directive nav-clear hides the back button, that could be your problem.
xMarston
You are genius.
I am greatly appreciate for your help and thanks a lot.
yep thats what i meant with “are you clearing your history” ;).
and a little recommendation:
Please do not use href- attributes for state-navigation.
use ng-href from angularjs or the ui-sref from the ui-router extention or an ng-click which triggers $location.path-change.
Greetz.
Thank you for the great hints. 