Javascript 如何在 angular.js 中实现 history.back()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14070285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement history.back() in angular.js
提问by baba-dev
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:
这是指令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 $locationbut didn't find anything about back button or history.back().
但什么也没有发生。我查看了有关$location的 angular.js API，但没有找到有关后退按钮或history.back().
回答by asgoth
回答by Andrew Joslin
Angular routes watch the browser's location, so simply using window.history.back()on clicking something would work.
Angular 路由会观察浏览器的位置，因此只需window.history.back()单击某些内容即可。
HTML:
HTML：
<div class="nav-header" ng-click="doTheBack()">Reverse!</div>
JS:
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.
我通常在我的应用程序控制器上创建一个名为“$back”的全局函数，我通常把它放在 body 标签上。
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>
然后在我的应用程序中的任何地方我都可以做 <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()).
（如果您希望它更易于测试，请将 $window 服务注入您的控制器并使用$window.history.back()）。
回答by Darren
Ideally use a simple directive to keep controllers free from redundant $window
理想情况下使用一个简单的指令来使控制器免受冗余 $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>
回答by pleerock
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>
回答by Rob Bygrave
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).
如果它有用......我正在点击“10 $digest() 迭代达到。中止！” 使用 $window.history.back() 时出错；使用 IE9（当然在其他浏览器中工作正常）。
I got it to work by using:
我通过使用它来工作：
setTimeout(function() {
$window.history.back();
},100);
回答by Arvind Kushwaha
Or you can simply use javascriptcode :
或者您可以简单地使用javascript代码：
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>
回答by Ripan Kumar
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();
});
}
}
});
回答by krmld
Angular 4:
角度 4：
/* typescript */
import { Location } from '@angular/common';
// ...
@Component({
// ...
})
export class MyComponent {
constructor(private location: Location) { }
goBack() {
this.location.back(); // go back to previous location
}
}
回答by deb2fast
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()不起作用，因为由于某种原因转换发生在 history.back() 发生之前，所以我不得不将我的转换包装在像这样的超时函数中。
$window.history.back();
setTimeout(function() {
$state.transitionTo("tab.jobs"); }, 100);
This fixed my issue.
这解决了我的问题。
回答by Paul Leclerc
In AngularJS2 I found a new way, maybe is just the same thing but in this new version :
在 AngularJS2 中，我找到了一种新方法，也许是一样的东西，但在这个新版本中：
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.
在我的函数之后，我可以看到我的应用程序将从 angular2/router 转到上一页 usgin 位置。
https://angular.io/docs/ts/latest/api/common/index/Location-class.html
https://angular.io/docs/ts/latest/api/common/index/Location-class.html
