I have directive which is site header with back button and I want on click to go back to the previous page. How do I do it in the angular way?
I have tried:
<header class="title">
<a class="back" ng-class="icons"><img src="../media/icons/right_circular.png" ng-click="history.back()" /></a>
<h1>{{title}}</h1>
<a href="/home" class="home" ng-class="icons"><img src="../media/icons/53-house.png" /></a>
</header>
and this is the directive js:
myApp.directive('siteHeader', function () {
return {
restrict: 'E',
templateUrl: 'partials/siteHeader.html',
scope: {
title: '@title',
icons: '@icons'
}
};
});
but nothing happens. I looked in the angular.js API about $location but didn't find anything about back button or history.back()
.
This question is related to
javascript
angularjs
For me, my problem was I needed to navigate back and then transition to another state. So using $window.history.back()
didn't work because for some reason the transition happened before history.back() occured so I had to wrap my transition in a timeout function like so.
$window.history.back();
setTimeout(function() {
$state.transitionTo("tab.jobs"); }, 100);
This fixed my issue.
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()
).
Angular 4:
/* typescript */
import { Location } from '@angular/common';
// ...
@Component({
// ...
})
export class MyComponent {
constructor(private location: Location) { }
goBack() {
this.location.back(); // go back to previous location
}
}
Or you can simply use javascript code :
onClick="javascript:history.go(-1);"
Like:
<a class="back" ng-class="icons">
<img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>
In case it is useful... I was hitting the "10 $digest() iterations reached. Aborting!" error when using $window.history.back(); with IE9 (works fine in other browsers of course).
I got it to work by using:
setTimeout(function() {
$window.history.back();
},100);
There was a syntax error. Try this and it should work:
directives.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function () {
history.back();
scope.$apply();
});
}
}
});
In AngularJS2 I found a new way, maybe is just the same thing but in this new version :
import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';
(...)
constructor(private _router: Router, private _location: Location) {}
onSubmit() {
(...)
self._location.back();
}
After my function, I can see that my application is going to the previous page usgin location from angular2/router.
https://angular.io/docs/ts/latest/api/common/index/Location-class.html
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>
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>
Source: Stackoverflow.com