191

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

我试过了：

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

但什么也没发生。我查看了有关$location的 angular.js API，但没有找到有关后退按钮或history.back().

4

10 回答 10

263

您需要在指令中使用链接功能：

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

请参阅jsFiddle。

于 2012-12-28T13:52:20.447 回答
135

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

于 2012-12-28T13:45:01.027 回答
66

理想情况下使用一个简单的指令来使控制器免于多余的 $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>
于 2014-04-28T21:04:22.880 回答
20

另一个不错且可重用的解决方案是创建这样的指令：

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>
于 2013-12-17T10:27:06.123 回答
18

万一它有用......我正在点击“10 $digest() 迭代达到。中止！” 使用 $window.history.back() 时出错；使用 IE9（当然在其他浏览器中也可以正常工作）。

我通过使用它来工作：

setTimeout(function() {
  $window.history.back();
},100);
于 2013-02-21T01:07:55.403 回答
3

或者您可以简单地使用代码：

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

像：

<a class="back" ng-class="icons">
   <img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>
于 2015-02-18T10:57:33.017 回答
1

出现语法错误。试试这个，它应该工作：

directives.directive('backButton', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function () {
                history.back();
                scope.$apply();
            });
        }
    }
});
于 2015-01-12T16:55:41.343 回答
1

角度 4：

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

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

  constructor(private location: Location) { } 

  goBack() {
    this.location.back(); // go back to previous location
  }
}
于 2017-06-17T07:52:06.723 回答
0

对我来说，我的问题是我需要导航回来，然后转换到另一个状态。所以使用$window.history.back()不起作用，因为由于某种原因，转换发生在 history.back() 发生之前，所以我不得不像这样将我的转换包装在一个超时函数中。

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

这解决了我的问题。

于 2015-02-19T06:01:07.693 回答
0

在 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

于 2016-05-13T15:28:20.170 回答