angularjs获得之前的路线path
<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> 在我的模块configuration
$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'}; }
正如你可以在我的控制器中看到的，我已经硬编码了后退button的URL和文本（其实我不需要文本作为使用图像）。 通过这种方式，我发现后退button在某些情况下导航不正确。 我不能使用history.back()因为我的后退button改变到主视图中的菜单链接。
所以我的问题是如何获得控制器中的以前的路线path或更好的方法来实现这一目标？
我创build了一个Plunker示范我的问题。 请检查一下。
这个替代scheme也提供了一个后台function
模板：
<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); }; });
使用$ 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); });
在你的html：
<a href="javascript:void(0);" ng-click="go_back()">Go Back</a>
在你的主控制器上：
$scope.go_back = function() { $window.history.back(); };
当用户点击返回链接时，控制器function被调用，它将回到以前的路由。
@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 };
这是我现在如何在$rootScope存储对前一个path的引用：
run(['$rootScope', function($rootScope) { $rootScope.$on('$locationChangeStart', function() { $rootScope.previousPage = location.pathname; }); }]);
您需要将事件侦听器耦合到Angular 1.x中的$ rootScope，但是您应该将来可以通过不在$ rootScope中存储上一个位置的值来validation您的代码。 存储价值的更好的地方是服务：
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); }); }]);
只是为了logging：
callback参数previousRoute有一个名为$route的属性，它非常类似于$route服务。 不幸的是currentRoute论点，并没有太多关于当前路线的信息。
为了克服这个，我尝试了一些这样的事情。
$routeProvider. when('/', { controller:..., templateUrl:'...', routeName:"Home" }). when('/menu', { controller:..., templateUrl:'...', routeName:"Site Menu" })
请注意在上面的路由configuration中添加了一个名为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) }) })
修改上面的代码：
$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) { console.log('prev path: ' + absOldUrl.$$route.originalPath); });
