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

Question

我有指令是带有后退按钮的站点标题,我想点击返回上一页.我如何以有角度的方式做到这一点？

我试过了:

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

Answer 1

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

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

见jsFiddle.

Answer 2

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

Answer 3

理想情况下,使用简单的指令使控制器不受冗余$ 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>

Answer 4

另外一个不错的和可重复使用的解决方案是建立就像一个指令,这个:

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>

Answer 5

如果它有用......我正在达到"10 $ digest()迭代次数.中止!" 使用$ window.history.back()时出错 使用IE9(当然在其他浏览器中工作正常).

我通过使用它得到它的工作:

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