angularjs越来越以前的路线路径

Question

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

正如你可以在我的控制器看，我硬编码的返回按钮链接和文本（其实我不需要使用文字作为使用图像）。通过这种方式，我发现后退按钮在某些情况下导航不正确。我无法使用history.back()因为我的后退按钮变为主页视图中的菜单链接。

所以我的问题是我如何获得控制器中的以前的路径路径或更好的方式来实现这一目标？

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

Answer 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) 
    }) 
}) 

Answer 2

使用$locationChangeStart or $locationChangeSuccess events，第3个参数：

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

Answer 3

这种替换还提供了备用功能。

模板：

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

}); 

Answer 4

修改上面的代码：

$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) { 
    console.log('prev path: ' + absOldUrl.$$route.originalPath); 
}); 

Answer 5

这是我目前如何存储在前面的路径中的参考$rootScope：

run(['$rootScope', function($rootScope) { 
     $rootScope.$on('$locationChangeStart', function() { 
      $rootScope.previousPage = location.pathname; 
     }); 
}]); 

Answer 6

@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 
     }; 

Answer 7

你需要夫妇在角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); 
    }); 
}]); 

Answer 8

在你的HTML：

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

在你的主控制器：

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

当用户点击在返回链接上，控制器功能被调用并且它将回到先前的路由。