51 
<h1>{{header}}</h1>
<!-- This Back button has multiple option -->
<!-- In home page it will show menu -->
<!-- In other views it will show back link -->
<a ng-href="{{back.url}}">{{back.text}}</a>
<div ng-view></div>

在我的模块配置中

  $routeProvider.
  when('/', {
    controller:HomeCtrl,
    templateUrl:'home.html'
  }).
  when('/menu', {
    controller:MenuCtrl,
    templateUrl:'menu.html'
  }).
  when('/items', {
    controller:ItemsCtrl,
    templateUrl:'items.html'
  }).
  otherwise({
    redirectto:'/'
  });

控制器

function HomeCtrl($scope, $rootScope){
  $rootScope.header = "Home";
  $rootScope.back = {url:'#/menu', text:'Menu'};
}

function MenuCtrl($scope, $rootScope){
  $rootScope.header = "Menu";
  $rootScope.back = {url:'#/', text:'Back'};
}

function ItemsCtrl($scope, $rootScope){
  $rootScope.header = "Items";
  $rootScope.back = {url:'#/', text:'Back'};
}

正如您在我的控制器中看到的那样，我已经硬编码了后退按钮 url 和文本（实际上我不需要文本作为使用图像）。通过这种方式，我发现在某些情况下后退按钮导航不正确。我不能使用history.back()我的后退按钮更改为主页视图中的菜单链接。

所以我的问题是如何在控制器中获取先前的路由路径，或者是更好的方法来实现这一点？

我创建了一个Plunker演示我的问题。请检查一下。

4

8 回答 8

74

该替代方案还提供了后退功能。

模板：

<a ng-click='back()'>Back</a>

模块：

myModule.run(function ($rootScope, $location) {

    var history = [];

    $rootScope.$on('$routeChangeSuccess', function() {
        history.push($location.$$path);
    });

    $rootScope.back = function () {
        var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
        $location.path(prevUrl);
    };

});
于 2013-09-19T12:41:27.160 回答
22

使用$locationChangeStart 或 $locationChangeSuccess 事件，第三个参数：

$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) {
   console.log('start', evt, absNewUrl, absOldUrl);
});
$scope.$on('$locationChangeSuccess',function(evt, absNewUrl, absOldUrl) {
   console.log('success', evt, absNewUrl, absOldUrl);
});
于 2013-07-23T23:44:34.610 回答
18

在您的 html 中： 

<a href="javascript:void(0);" ng-click="go_back()">Go Back</a>

在您的主控制器上：

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

当用户点击返回链接时，控制器功能被调用，它将返回到先前的路线。

于 2016-04-21T07:09:12.863 回答
5

@andresh 对我来说，locationChangeSuccess 代替了 routeChangeSuccess。

//Go back to the previous stage with this back() call
var history = [];
$rootScope.$on('$locationChangeSuccess', function() {
    history.push($location.$$path);
});

$rootScope.back = function () {
          var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
          $location.path(prevUrl);
          history = []; //Delete history array after going back
      };
于 2015-07-11T13:36:18.853 回答
4

这就是我目前在以下位置存储对先前路径的引用的方式$rootScope：

run(['$rootScope', function($rootScope) {
        $rootScope.$on('$locationChangeStart', function() {
            $rootScope.previousPage = location.pathname;
        });
}]);
于 2015-02-23T09:15:02.390 回答
4

您需要将事件侦听器与 Angular 1.x 中的 $rootScope 耦合，但您可能应该通过不将先前位置的值存储在 $rootScope 上来稍微证明您的代码。存储价值的更好地方是服务：

var app = angular.module('myApp', [])
.service('locationHistoryService', function(){
    return {
        previousLocation: null,

        store: function(location){
            this.previousLocation = location;
        },

        get: function(){
            return this.previousLocation;
        }
})
.run(['$rootScope', 'locationHistoryService', function($location, locationHistoryService){
    $rootScope.$on('$locationChangeSuccess', function(e, newLocation, oldLocation){
        locationHistoryService.store(oldLocation);
    });
}]);
于 2015-11-03T16:59:46.897 回答
1

只是为了记录：

回调参数previousRoute有一个名为的属性，该属性与服务$route非常相似$route。不幸的是currentRoute，争论是没有太多关于当前路线的信息。

为了克服这个问题，我尝试了这样的事情。

$routeProvider.
   when('/', {
    controller:...,
    templateUrl:'...',
    routeName:"Home"
  }).
  when('/menu', {
    controller:...,
    templateUrl:'...',
    routeName:"Site Menu"
  })

请注意，在上述路由配置routeName中，添加了一个名为的自定义属性。

app.run(function($rootScope, $route){
    //Bind the `$routeChangeSuccess` event on the rootScope, so that we dont need to 
    //bind in induvidual controllers.
    $rootScope.$on('$routeChangeSuccess', function(currentRoute, previousRoute) {
        //This will give the custom property that we have defined while configuring the routes.
        console.log($route.current.routeName)
    })
})
于 2013-03-06T05:34:02.527 回答
1

修改上面的代码：

$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) {
   console.log('prev path: ' + absOldUrl.$$route.originalPath);
});
于 2014-02-23T11:10:56.033 回答