Question

我希望通过在输入字段中小费来动态更改我的angularjs应用中的网址。

e.g。

我留下来： http://localhost/test/year/2012
我将通过输入字段更改侧面到2013年调用我的yearIsChanged函数，而不是url应该更改为 http://localhost/test/year/2013
但是使用我当前的配置，网址将更改为 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 spec。因此AngularJS将检测到路由不会被更改，并且有可能不重新加载控制器（reloadOnSearch:false）。

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

要实现您的目标（特定网址，如/ year / 2012）而无需重新加载控制器，您可以：

重写ngView指令（以及可能对AngularJS中的默认路由进行一些更改）并尝试重用范围。这听起来很变化。
请勿使用默认的AngularJS路由并自行实现所需的行为。

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

Answer 3

你应该注意到你的路线：

“when（'/ test / year / ：year '”

BOLD 字，是 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
     }   
   }

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

3 个答案: