Javascript 如何使用 AngularJS 更改 url 中的参数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14174394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change params in url with AngularJS?
提问by Silver52
I want change the url in my angularjs app on the fly by tipping in a inputfield.
我想通过在输入字段中小费来动态更改我的 angularjs 应用程序中的 url。
e.g.
例如
- I stay on:
http://localhost/test/year/2012 - I will change on the side via a input field the year to 2013 that call my yearIsChanged function, than the url should changed to
http://localhost/test/year/2013 - But with my current configuration the url is changed to
http://localhost/test/year/2012/?year=2013
- 我留下来：
http://localhost/test/year/2012 - 我将通过调用我 yearIsChanged 函数的 2013 年的输入字段在侧面进行更改，而不是 url 应更改为
http://localhost/test/year/2013 - 但是根据我当前的配置，url 更改为
http://localhost/test/year/2012/?year=2013
My modul configuration.
我的模块配置。
var module = angular.module('exampleApp').
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/test/year/:year', {templateUrl: 'partials/test.html', controller: OverviewCtrl, reloadOnSearch: false}).
otherwise({redirectTo: '/'});
}]);
Controller action:
控制器动作：
function OverviewCtrl($scope,$routeParams, $location) {
$scope.yearIsChanged = function () {
$location.search('year', $scope.year);
}
}
回答by asgoth
$location.searchwill create an url like:
$location.search将创建一个网址，如：
http://localhost/test/year/2012?year=2013
which is not what you want. You need to use $location.url():
这不是你想要的。您需要使用$location.url()：
function OverviewCtrl($scope,$routeParams, $location) {
$scope.yearIsChanged = function () {
$location.url('/test/year/' + $scope.year);
}
}
回答by Valentyn Shybanov
Actually if you'll use 'search' then $location service will change 'search' part of URL, see URL spec. So AngularJS will detect that routing would not be changed and has possibility not to reload controller (reloadOnSearch:false).
实际上，如果您将使用“搜索”，那么 $location 服务将更改 URL 的“搜索”部分，请参阅URL 规范。所以 AngularJS 会检测到路由不会改变，并且有可能不重新加载控制器（reloadOnSearch:false）。
But using .url or .path methods can change whole URLs, but AngularJS router can't detect can it re-use controller or not. So the only option is apply routing table to new url and re-initialize routes.
但是使用 .url 或 .path 方法可以更改整个 URL，但 AngularJS 路由器无法检测它是否可以重用控制器。所以唯一的选择是将路由表应用于新的 url 并重新初始化路由。
To achieve your goal (specific urls like /year/2012) without re-loading controller, you can:
为了在不重新加载控制器的情况下实现您的目标（特定网址，如 /year/2012），您可以：
rewrite ngView directive (and possible some changes to default routing in AngularJS) and try to re-use scopes. This sounds like quite havy change.
Don't use default AngularJS routing and implement desired behaviour by yourself.
重写 ngView 指令（以及可能对 AngularJS 中的默认路由进行一些更改）并尝试重用范围。这听起来变化很大。
不要使用默认的 AngularJS 路由并自己实现所需的行为。
Here is sample Plunkerthat illustrates second option (press small blue button in preview pane to see how URL changes, and also check that prev/next browser's buttons do not reload page/controller).
这是说明第二个选项的示例 Plunker（按预览窗格中的蓝色小按钮查看 URL 如何更改，并检查上一个/下一个浏览器的按钮是否不重新加载页面/控制器）。
回答by Milad
You should notice that in your route :
您应该注意到在您的路线中：
"when (' / test / year / : year' "
“当（'/测试/年/ ：年'”
the BOLDword , is a routeParamand is notsearch fileds.
在BOLD字，是一个routeParam并 没有的Fileds搜索。
So if you want to change your route , you should use this :
所以如果你想改变你的路线，你应该使用这个：
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
}
}
