javascript - 如何使用 AngularJS 更改 url 中的参数？

Question

我想通过在输入字段中提示来动态更改我的 angularjs 应用程序中的 url。

例如

1. 我坚持： http://localhost/test/year/2012
2. 我将通过调用我的 yearIsChanged 函数的年份到 2013 年的输入字段进行更改，而不是 url 应该更改为 http://localhost/test/year/2013
3. 但是使用我当前的配置，网址更改为 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将创建一个像这样的 url：

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

您应该注意到在您的路线中：

“当（'/测试/年/ ：年'”

粗体字，是一个routeParam ，不是 搜索文件。

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

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

Answer 3

实际上，如果您使用“搜索”，那么 $location 服务将更改 URL 的“搜索”部分，请参阅URL 规范。所以 AngularJS 会检测到路由不会被改变并且有可能不重新加载控制器（reloadOnSearch:false）。

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

要在不重新加载控制器的情况下实现您的目标（特定网址，如 /year/2012），您可以：

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

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

这是说明第二个选项的示例 Plunker（按预览窗格中的蓝色小按钮以查看 URL 如何更改，并检查上一个/下一个浏览器的按钮是否不会重新加载页面/控制器）。