How to implement history.back() in angular.js
Angular routes watch the browser's location, so simply using window.history.back()
on clicking something would work.
HTML:
<div class="nav-header" ng-click="doTheBack()">Reverse!</div>
JS:
$scope.doTheBack = function() {
window.history.back();
};
I usually create a global function called '$back' on my app controller, which I usually put on the body tag.
angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
$scope.$back = function() {
window.history.back();
};
}]);
Then anywhere in my app I can just do <a ng-click="$back()">Back</a>
(If you want it to be more testable, inject the $window service into your controller and use $window.history.back()
).
You need to use a link function in your directive:
link: function(scope, element, attrs) {
element.on('click', function() {
$window.history.back();
});
}
See jsFiddle.
Ideally use a simple directive to keep controllers free from redundant $window
app.directive('back', ['$window', function($window) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.bind('click', function () {
$window.history.back();
});
}
};
}]);
Use like this:
<button back>Back</button>
Another nice and reusable solution is to create a directive like this:
app.directive( 'backButton', function() {
return {
restrict: 'A',
link: function( scope, element, attrs ) {
element.on( 'click', function () {
history.back();
scope.$apply();
} );
}
};
} );
then just use it like this:
<a href back-button>back</a>