如何在 angular 中实现 history.back（） .js

javascript angularjs

2022-08-30 01:34:39

我有指令，这是带有后退按钮的网站标题，我想点击返回上一页。我如何以棱角分明的方式做到这一点？

我试过：

<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'
        }
    };
});

但没有任何反应。我在有角度.js API中查看了有关$location但没有找到有关后退按钮或.history.back()

答案 1

您需要在指令中使用链接函数：

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

请参阅 jsFiddle。

答案 2

角度路由监视浏览器的位置，因此只需单击某些内容即可。window.history.back()

网页：

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