如何使用AngularJS更改URL中的参数？

Question

我希望能够在我的AngularJS应用程序中通过输入框实时更改URL。

例如：

1. 我目前的URL是： 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);
    }   
}

- Silver52

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

- asgoth

---

好的，这样可以正确更改我的URL。但是使用$location.url(...)会重新加载页面，并且"reloadOnSearch: false"参数不起作用。AngularJS是否有另一个参数例如reloadOnUrlChange？ - Silver52

当路由实际改变时（例如，不是在输入“2012”时），您的OverviewCtrl将再次执行。 - asgoth

如果我在输入框中输入任何内容，那么控制器将被重新初始化，并且我将失去输入框的焦点。这是一个问题，因为我无法为每个字符都聚焦输入框。 :D - Silver52

你不能在按键事件上触发它吗？或者在更改事件或失焦事件上触发，而不是在按键事件上触发？ - asgoth

我已将我的输入字段更改为选择框。我总是遇到焦点丢失的问题，但我可以接受它。感谢您的帮助。 - Silver52

Answer 2

请注意在您的路由中：

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

BOLD单词是路由参数，而不是搜索字段。

因此，如果您想更改路由，请使用以下内容：

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

- Milad

Answer 3

实际上，如果您使用“search”功能，则$location服务将更改URL的“search”部分，请参见URL规范。因此，AngularJS将检测到路由不会更改，并且有可能不重新加载控制器（reloadOnSearch:false）。

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

为了实现您的目标（例如/year/2012之类的特定URL），而又不重新加载控制器，您可以：

1. 重写ngView指令（以及可能对AngularJS中默认路由的一些更改），并尝试重用作用域。这听起来很麻烦。

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

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

- Valentyn Shybanov