Angularjs получает предыдущий маршрут маршрута

<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() coz my back, чтобы перейти к ссылке меню в домашнем виде.

Итак, мой вопрос в том, как получить предыдущий маршрут маршрута в контроллерах или лучший способ добиться этого?

Я создал демонстрацию Plunker моей проблемы. Пожалуйста, проверьте это.

Ответы

Ответ 1

Эта альтернатива также обеспечивает обратную функцию.

Шаблон:

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

});

Ответ 2

Используйте $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);
});

Ответ 3

В вашем html:

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

На главном контроллере:

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

Когда пользователь нажимает ссылку "Назад", вызывается функция контроллера, и она вернется к предыдущему маршруту.

Ответ 4

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

Ответ 5

Вот как я сейчас храню ссылку на предыдущий путь в $rootScope:

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

Ответ 6

Вам нужно будет связать прослушиватель событий с $rootScope в Angular 1.x, но вы, вероятно, должны будете в будущем доказать свой код немного, не сохраняя значение предыдущего местоположения на $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);
    });
}]);

Ответ 7

Просто для документа:

Аргумент обратного вызова 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)
    })
})

Ответ 8

для кода выше:

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