Как изменить параметры в url с помощью AngularJS?

Я хочу изменить url в моем приложении angularjs на лету, опрокинувшись во входном поле.

например.

  • Я остаюсь: http://localhost/test/year/2012
  • Я изменюсь сбоку через поле ввода в год до 2013 года, которое вызывает мою функцию yearIsChanged, чем URL-адрес должен быть изменен на http://localhost/test/year/2013
  • Но с моей текущей конфигурацией URL-адрес изменен на http://localhost/test/year/2012/?year=2013

Модная конфигурация.

var module = angular.module('exampleApp').
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/test/year/:year', {templateUrl: 'partials/test.html', controller: OverviewCtrl, reloadOnSearch: false}).
        otherwise({redirectTo: '/'});
}]);

Действие контроллера:

 function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
        $location.search('year', $scope.year);
    }   
}

Ответы

Ответ 1

$location.search создаст URL-адрес, например:

http://localhost/test/year/2012?year=2013

который не то, что вы хотите. Вам нужно использовать $location.url():

function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
        $location.url('/test/year/' + $scope.year);
    }   
}

Ответ 2

Фактически, если вы будете использовать "поиск", тогда служба определения местоположения изменит "поиск" части URL-адреса, см. URL-спецификация. Поэтому AngularJS обнаружит, что маршрутизация не будет изменена и имеет возможность не перезагружать контроллер (reloadOnSearch:false).

Но использование методов .url или .path может изменять целые URL-адреса, но маршрутизатор AngularJS не может обнаружить, может ли он повторно использовать контроллер или нет. Таким образом, единственным вариантом является применение таблицы маршрутизации к новому URL-адресу и повторная инициализация маршрутов.

Чтобы достичь своей цели (конкретные URL-адреса, например/год/2012) без контроллера повторной загрузки, вы можете:

  • переписать директиву ngView (и, возможно, некоторые изменения в маршрутизации по умолчанию в AngularJS) и попытаться повторно использовать области. Это звучит как довольно тяжелое изменение.

  • Не используйте маршрутизацию по умолчанию AngularJS и самостоятельно реализуйте желаемое поведение.

Вот образец Plunker, который иллюстрирует второй вариант (нажмите маленькую синюю кнопку в области предварительного просмотра, чтобы увидеть, как изменяется URL-адрес, а также убедитесь, что предыдущие/следующие кнопки браузера не перезагружают страницу/контроллер).

Ответ 3

Вы должны заметить, что на вашем маршруте:

", когда ('/test/year/: year'"

слово BOLD - это маршрутParam и не.

Итак, если вы хотите изменить маршрут, вы должны использовать это:

    function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
       $location.path('/test/year/'+$scope.year)
     // .path() will set(or get) your routeParams 
     // .search() will set(or get) your seach fields like your error
     }   
   }