angularjs che ottiene il percorso del percorso precedente

{{header}}

{{back.text}}

Nel mio modulo config

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

Controller

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

Come puoi vedere nei miei controller, ho codificato l’URL e il testo del pulsante Indietro (in realtà non ho bisogno del testo come se usassi un’immagine). In questo modo, in alcuni casi, ho trovato il pulsante Indietro che naviga in modo errato. Non riesco a utilizzare history.back() perché il mio pulsante Indietro cambia in un collegamento di menu nella vista home.

Quindi la mia domanda è: come posso ottenere il percorso di percorso precedente nei controller o è il modo migliore per raggiungere questo objective?

Ho creato una dimostrazione Plunker del mio problema. Si prega di controllare quello

Questa alternativa fornisce anche una funzione secondaria.

Il template:

 Back 

Il modulo:

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

Utilizzare gli eventi $ locationChangeStart o $ locationChangeSuccess , 3 ° parametro:

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

Nel tuo html:

 Go Back 

Sul tuo controller principale:

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

Quando l’utente fa clic sul collegamento Go Back, la funzione controller viene richiamata e torna al percorso precedente.

@andresh Per me locationChangeSuccess ha funzionato invece di 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 }; 

Questo è il modo in cui attualmente memorizzo un riferimento al percorso precedente in $rootScope :

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

Avrai bisogno di accoppiare il listener di eventi a $ rootScope in Angular 1.x, ma probabilmente dovresti provare a prevedere il tuo codice in futuro non memorizzando il valore della posizione precedente su $ rootScope. Un posto migliore per memorizzare il valore sarebbe un servizio:

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

Solo per documentare:

L’argomento di callback previousRoute ha una proprietà chiamata $route che è molto simile al servizio $route . Purtroppo currentRoute argomento currentRoute non ha molte informazioni sul percorso corrente.

Per superare questo ho provato qualcosa di simile.

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

Si prega di notare che nella suddetta route config è stata aggiunta una proprietà personalizzata chiamata 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) }) }) 

modifica per il codice sopra:

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