[英]How to implement history.back() in angular.js
我有指令是带有后退按钮的站点标题,我想点击返回上一页。 我如何以有角度的方式做到这一点?
我试过了:
<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中查找了关于$ location但没有找到关于后退按钮或history.back()
任何信息。
您需要在指令中使用链接函数:
link: function(scope, element, attrs) {
element.on('click', function() {
$window.history.back();
});
}
见jsFiddle 。
Angular路线会监视浏览器的位置,因此只需使用window.history.back()
点击某些内容即可。
HTML:
<div class="nav-header" ng-click="doTheBack()">Reverse!</div>
JS:
$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()
)。
理想情况下,使用简单的指令使控制器不受冗余$ 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>
另外一个不错的和可重复使用的解决方案是建立就像一个指令, 这个 :
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>
如果它有用......我正在达到“10 $ digest()迭代次数。中止!” 使用$ window.history.back()时出错 使用IE9(当然在其他浏览器中工作正常)。
我通过使用它得到它的工作:
setTimeout(function() {
$window.history.back();
},100);
或者你可以简单地使用javascript代码:
onClick="javascript:history.go(-1);"
喜欢:
<a class="back" ng-class="icons">
<img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>
出现语法错误。 试试这个它应该工作:
directives.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function () {
history.back();
scope.$apply();
});
}
}
});
角度4:
/* typescript */
import { Location } from '@angular/common';
// ...
@Component({
// ...
})
export class MyComponent {
constructor(private location: Location) { }
goBack() {
this.location.back(); // go back to previous location
}
}
对我来说,我的问题是我需要导航回来然后过渡到另一个州。 所以使用$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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.