如何使用AngularJS更改URL中的params？

Question

我想通过在输入字段中小费来动态更改我的angularjs app中的url.

例如

1. 我留下来: http://localhost/test/year/2012
2. 我将通过输入字段改变侧面,到2013年调用我的yearIsChanged函数,而不是url应该更改为 http://localhost/test/year/2013
3. 但是使用我当前的配置,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);
    }   
}

Answer 1

$location.search 将创建一个像以下网址:

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

这不是你想要的.你需要使用$location.url():

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

Answer 2

实际上,如果您使用"搜索",那么$ location服务将更改URL的"搜索"部分,请参阅URL规范.因此AngularJS将检测到路由不会被更改,并且有可能不重新加载controller(reloadOnSearch:false).

但是使用.url或.path方法可以更改整个URL,但是AngularJS路由器无法检测到它是否可以重用控制器.因此,唯一的选择是将路由表应用于新URL并重新初始化路由.

为了实现您的目标(特定网址如/ year/2012)而无需重新加载控制器,您可以:

1. 重写ngView指令(以及可能对AngularJS中的默认路由进行一些更改)并尝试重用范围.这听起来像是变化很大的变化.

2. 不要使用默认的AngularJS路由并自己实现所需的行为.

下面是示例Plunker,它说明了第二个选项(在预览窗格中按下小蓝色按钮以查看URL如何更改,还检查上一个/下一个浏览器的按钮是否不重新加载页面/控制器).

Answer 3

你应该注意到你的路线:

"when('/ test/year/:year '"

在BOLD字,是一个routeParam而 不是搜索的Fileds.

所以如果你想改变你的路线,你应该使用这个:

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