Come posso modificare i parametri in url con AngularJS?

Question

Voglio cambiare l'url della mia app angularjs al volo rinunciando a un campo di input.

ad es.

1. rimango su: http://localhost/test/year/2012
2. cambierò sul lato attraverso un campo di input l'anno al 2013 che chiamano la mia funzione yearIsChanged, che l'url dovrebbe cambiato in http://localhost/test/year/2013
3. Ma con il mio attuale configurazione l'url è cambiato in http://localhost/test/year/2012/?year=2013

La mia configurazione di configurazione.

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

azione di controllo:

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

Answer 1

$location.search creerà un url del tipo:

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

che non è quello che si desidera. È necessario utilizzare $location.url():

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

Answer 2

In realtà se userete 'ricerca', allora $ servizio di localizzazione cambierà 'ricerca' parte dell'URL, vedere URL spec. Quindi AngularJS rileverà che il routing non verrà modificato e ha la possibilità di non ricaricare il controller (reloadOnSearch:false).

Tuttavia, l'utilizzo di metodi .url o .path può modificare interi URL, ma il router AngularJS non può rilevare se riutilizza il controller o meno. Quindi l'unica opzione è applicare la tabella di routing al nuovo URL e reinizializzare i percorsi.

per raggiungere il tuo obiettivo (URL specifici come/anno/2012) senza regolatore ri-caricamento, è possibile: direttiva

1. riscrittura ngView (ed eventuali alcune modifiche al routing predefinita in AngularJS) e cercare di riutilizzare gli ambiti. Sembra un cambiamento piuttosto havy.

2. Non utilizzare il routing AngularJS predefinito e implementare il comportamento desiderato da soli.

Ecco sample Plunker che illustra seconda opzione (premere piccolo pulsante blu nel riquadro di anteprima per vedere come i cambiamenti di URL, e di controllare anche pulsanti che prev/next suo navigatore web non ricaricare la pagina/regolatore).

Answer 3

si dovrebbe notare che nel tuo percorso:

"quando ('/ test/anno/: anno'"

la BOLD parola , è un routeParam e non è campi di ricerca.

Quindi, se si desidera modificare il percorso, è necessario utilizzare questo:

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