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

當用戶點擊在返回鏈接上，控制器功能被調用並且它將回到先前的路由。