<h1>{{header}}</h1>
<!-- This Back button has multiple option -->
<!-- In home page it will show menu -->
<!-- In other views it will show back link -->
<a ng-href="{{back.url}}">{{back.text}}</a>
<div ng-view></div>
In my module config
$routeProvider.
when('/', {
controller:HomeCtrl,
templateUrl:'home.html'
}).
when('/menu', {
controller:MenuCtrl,
templateUrl:'menu.html'
}).
when('/items', {
controller:ItemsCtrl,
templateUrl:'items.html'
}).
otherwise({
redirectto:'/'
});
Controllers
function HomeCtrl($scope, $rootScope){
$rootScope.header = "Home";
$rootScope.back = {url:'#/menu', text:'Menu'};
}
function MenuCtrl($scope, $rootScope){
$rootScope.header = "Menu";
$rootScope.back = {url:'#/', text:'Back'};
}
function ItemsCtrl($scope, $rootScope){
$rootScope.header = "Items";
$rootScope.back = {url:'#/', text:'Back'};
}
As you can see in my controllers I have hard coded the back button url and text (Actually I don't need the text as using an image). In this way I found back button navigate incorrectly in some cases. I cannot use history.back() coz my back button changes to a menu link in home view.
So my question is how do I get the previous route path in controllers or is better way to achieve this ?
I have created a Plunker demonstration of my problem. Please check that.
This alternative also provides a back function.
The template:
<a ng-click='back()'>Back</a>
The module:
myModule.run(function ($rootScope, $location) {
var history = [];
$rootScope.$on('$routeChangeSuccess', function() {
history.push($location.$$path);
});
$rootScope.back = function () {
var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
$location.path(prevUrl);
};
});
Use the $locationChangeStart or $locationChangeSuccess events, 3rd parameter:
$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) {
console.log('start', evt, absNewUrl, absOldUrl);
});
$scope.$on('$locationChangeSuccess',function(evt, absNewUrl, absOldUrl) {
console.log('success', evt, absNewUrl, absOldUrl);
});
This is how I currently store a reference to the previous path in the $rootScope:
run(['$rootScope', function($rootScope) {
$rootScope.$on('$locationChangeStart', function() {
$rootScope.previousPage = location.pathname;
});
}]);
@andresh For me locationChangeSuccess worked instead of routeChangeSuccess.
//Go back to the previous stage with this back() call
var history = [];
$rootScope.$on('$locationChangeSuccess', function() {
history.push($location.$$path);
});
$rootScope.back = function () {
var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
$location.path(prevUrl);
history = []; //Delete history array after going back
};
Just to document:
The callback argument previousRoute is having a property called $route which is much similar to the $route service.
Unfortunately currentRoute argument, is not having much information about the current route.
To overcome this i have tried some thing like this.
$routeProvider.
when('/', {
controller:...,
templateUrl:'...',
routeName:"Home"
}).
when('/menu', {
controller:...,
templateUrl:'...',
routeName:"Site Menu"
})
Please note that in the above routes config a custom property called routeName is added.
app.run(function($rootScope, $route){
//Bind the `$routeChangeSuccess` event on the rootScope, so that we dont need to
//bind in induvidual controllers.
$rootScope.$on('$routeChangeSuccess', function(currentRoute, previousRoute) {
//This will give the custom property that we have defined while configuring the routes.
console.log($route.current.routeName)
})
})
modification for the code above:
$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) {
console.log('prev path: ' + absOldUrl.$$route.originalPath);
});