如何在 angular.js 中实现 history. back ()

我有指令，这是网站标题与后退按钮，我想在点击回到上一页。我怎样才能用有棱角的方式做到这一点？

我试过了:

<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>

这是指令 js:

myApp.directive('siteHeader', function () {
return {
restrict: 'E',
templateUrl: 'partials/siteHeader.html',
scope: {
title: '@title',
icons: '@icons'
}
};
});

但是什么也没有发生。我在 angular.js API 中查找了关于 $位置的内容，但是没有找到任何关于后退按钮或者 history.back()的内容。

258774 次浏览
小开

角度路线监视浏览器的位置，所以简单地使用 window.history.back()点击一些将工作。

HTML:

<div class="nav-header" ng-click="doTheBack()">Reverse!</div>

约翰逊:

$scope.doTheBack = function() {
window.history.back();
};

我通常在我的应用程序控制器上创建一个名为“ $back”的全局函数，我通常把它放在 body 标签上。

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
$scope.$back = function() {
window.history.back();
};
}]);

然后在我的应用程序的任何地方，我可以只做 <a ng-click="$back()">Back</a>

(如果您希望它更具可测试性，那么将 $window 服务注入到您的控制器中并使用 $window.history.back())。

小开
最佳答案

你需要在你的指令中使用一个链接函数:

link: function(scope, element, attrs) {
element.on('click', function() {
$window.history.back();
});
}

参见 JsFiddle。

小开

如果它有用的话... ... 我正在达到“10美元摘要()迭代”。终止任务!”使用 $window.history. back ()时出现错误; 使用 IE9时(当然在其他浏览器中可以很好地工作)。

我通过使用:

setTimeout(function() {
$window.history.back();
},100);
小开

另一个好的和可重用的解决方案是创建一个类似 这个的指令:

app.directive( 'backButton', function() {
return {
restrict: 'A',
link: function( scope, element, attrs ) {
element.on( 'click', function () {
history.back();
scope.$apply();
} );
}
};
} );

然后像这样使用它:

<a href back-button>back</a>
小开

理想情况下，使用一个简单的指令来保持控制器免于冗余 $window

app.directive('back', ['$window', function($window) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.bind('click', function () {
$window.history.back();
});
}
};
}]);

使用方法如下:

<button back>Back</button>
小开

有一个语法错误。试试这个，它应该可以工作:

directives.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function () {
history.back();
scope.$apply();
});
}
}
});
小开

或者你可以简单地使用 代码:

onClick="javascript:history.go(-1);"

比如:

<a class="back" ng-class="icons">
<img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>
小开

对我来说，我的问题是我需要回到过去，然后过渡到另一种状态。所以使用 $window.history.back()不起作用，因为出于某种原因，转换发生在 history. back ()发生之前，所以我必须将转换包装在一个超时函数中，如下所示。

$window.history.back();
setTimeout(function() {
$state.transitionTo("tab.jobs"); }, 100);

这解决了我的问题。

小开

在 AngularJS2中，我发现了一种新的方法，也许是同样的东西，但在这个新版本中:

import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';


(...)


constructor(private _router: Router, private _location: Location) {}


onSubmit() {
(...)
self._location.back();
}

在我的功能之后，我可以看到我的应用程序正在从 angular2/router 到上一页 usgin 位置。

Https://angular.io/docs/ts/latest/api/common/index/location-class.html

小开

角度4:

/* typescript */
import { Location } from '@angular/common';
// ...


@Component({
// ...
})
export class MyComponent {


constructor(private location: Location) { }


goBack() {
this.location.back(); // go back to previous location
}
}

提交答案