Ionic stateProvider - show/hide back button dynamically - angularjs

Question

I'm working on an Ionic app and I fully working left menu with working states.
Here's the menu code:
<ion-side-menu side="left">
<ion-header-bar class="bar-royal">
<h1 class="title">Example</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-repeat="test in data"
ng-switch="test.ID"
ng-href="{{test.ID == 0 ? '#/app/test' : '#/app/details/' + test.iID}}"
class="item item-icon-right">
<div ng-switch-when="0"><span>{{test.Name}}</span></div>
<div ng-switch-default><span>{{test.Name}}</span>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
very basic setup.
and the code with the states (coffescript):
angular.module('hgApp', ['ionic'])
.config [
'$stateProvider'
'$urlRouterProvider'
($stateProvider, $urlRouterProvider) ->
$stateProvider.state('app',
url: '/app'
abstract: true
templateUrl: './sections/menu/menu.html'
controller: 'menuList'
).state('app.details',
url: '/details/:testID'
views:
'menuContent':
templateUrl: './sections/details/testDetails.html'
controller: 'testDetails'
Now, here my problem:
I can navigate to app/details/{testID} from the list on the left menu, or from links that I have on my home page.
I need to be able to add a back button to the top bar of app/details/{testID} only if I got to the page using the links on the home page, but not if i got there from the left menu list.
both the menu list and the links on the home page use as href "#/app/details/{{test.ID}}"
How can I do that? I really have no clue at all.
Thanks in advance for any help.

Answer 1

Hi i had a similar situation where i had to hide the button if the form was editable so i did the following
<ion-nav-back-button ng-show="!$root.hideBack"></ion-nav-back-button>
Controller.js
$scope.makeEditable = function () {
$scope.isEditable = true;
$rootScope.hideBack = true;
};
so if the fields were editable the back button would dissapear. I hope this is of any help.
Another example is:
Use $ionicHistory in your controller before calling $state.go('app.details'). I guess you have different controller for Home page where you use $stage.go to go to the details page? so the code should look something like
app.controller('HomeCtrl', ["$scope", "$ionicHistory", function($scope, $ionicHistory) {
$scope.goToDetails = function() {
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.details');
}
}]);
Html
<button ng-click="goToDetails()"></button>

Answer 2

Interesting question by the way
I think you can accomplish the behaviour you want using $broadcast
Basically you have a function that is called when you click on the link that will tell the testDetails controller 'hey, we came from a link, do your stuff'
The testDetails controller will be expecting this call and display the button accordingly
Raw code:
app.controller('AnyCtrl',
function AnyCtrl ($scope) {
// Call this code on link click
$scope.$broadcast('fromlink', 'Some data');
});
app.controller('testDetails',
function testDetails ($scope) {
$scope.$on('fromlink', function (event, data) {
// Add button. Profit
});
});
You can find a link to a small article covering all possibilities here
https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/