本文翻译自:What's the most concise way to read query parameters in AngularJS?
I'd like to read the values of URL query parameters using AngularJS. 我想使用AngularJS读取URL查询参数的值。 I'm accessing the HTML with the following URL: 我正在使用以下URL访问HTML:
http://127.0.0.1:8080/test.html?target=bob
As expected, location.search
is "?target=bob"
. 不出所料, location.search
是"?target=bob"
。 For accessing the value of target , I've found various examples listed on the web, but none of them work in AngularJS 1.0.0rc10. 为了访问target的值,我在网络上找到了各种示例,但是在AngularJS 1.0.0rc10中它们都不起作用。 In particular, the following are all undefined
: 特别是,以下所有内容均未undefined
:
-
$location.search.target
-
$location.search['target']
-
$location.search()['target']
Anyone know what will work? 有人知道会起作用吗? (I'm using $location
as a parameter to my controller) (我将$location
用作控制器的参数)
Update: 更新:
I've posted a solution below, but I'm not entirely satisfied with it. 我在下面发布了一个解决方案,但是我并不完全满意。 The documentation at Developer Guide: Angular Services: Using $location states the following about $location
: 开发人员指南:Angular Services:使用$ location中的文档说明了有关$location
的以下内容:
When should I use $location? 什么时候应该使用$ location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser. 任何时候您的应用程序需要对当前URL的更改做出反应,或者您想在浏览器中更改当前URL。
For my scenario, my page will be opened from an external webpage with a query parameter, so I'm not "reacting to a change in the current URL" per se. 对于我的情况,我的页面将从带有查询参数的外部网页打开,因此,我本身并不是在“响应当前URL的更改”。 So maybe $location
isn't the right tool for the job (for the ugly details, see my answer below). 因此, $location
可能不是工作的正确工具(有关丑陋的详细信息,请参见下面的答案)。 I've therefore changed the title of this question from "How to read query parameters in AngularJS using $location?" 因此,我已将问题的标题从“如何使用$ location读取AngularJS中的查询参数?”中更改。 to "What's the most concise way to read query parameters in AngularJS?". “在AngularJS中读取查询参数的最简洁方法是什么?”。 Obviously I could just use javascript and regular expression to parse location.search
, but going that low-level for something so basic really offends my programmer sensibilities. 显然,我可以只使用javascript和正则表达式来解析location.search
,但是以如此低的水平进行一些基本的操作确实会冒犯我的程序员。
So: is there a better way to use $location
than I do in my answer, or is there a concise alternate? 所以:有比我在答案中更好的使用$location
方法,还是有简洁的替代方法?
#1楼
参考:https://stackoom.com/question/kQAL/在AngularJS中读取查询参数的最简洁方法是什么
#2楼
You can inject $routeParams (requires ngRoute ) into your controller. 您可以将$ routeParams (需要ngRoute )注入到控制器中。 Here's an example from the docs: 这是文档中的示例:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
EDIT: You can also get and set query parameters with the $location service (available in ng
), particularly its search
method: $location.search() . 编辑:您还可以使用$ location服务(在ng
可用)来获取和设置查询参数,尤其是其search
方法: $ location.search() 。
$routeParams are less useful after the controller's initial load; 控制器初始加载后,$ routeParams的用处不大。 $location.search()
can be called anytime. $location.search()
可以随时调用。
#3楼
To give a partial answer my own question, here is a working sample for HTML5 browsers: 为了部分回答我自己的问题,以下是HTML5浏览器的工作示例:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
The key was to call $locationProvider.html5Mode(true);
关键是调用$locationProvider.html5Mode(true);
as done above. 如上所述。 It now works when opening http://127.0.0.1:8080/test.html?target=bob
. 现在,在打开http://127.0.0.1:8080/test.html?target=bob
。 I'm not happy about the fact that it won't work in older browsers, but I might use this approach anyway. 我对它不能在较旧的浏览器中运行这一事实感到不满意,但是我仍然可以使用这种方法。
An alternative that would work with older browsers would be to drop the html5mode(true)
call and use the following address with hash+slash instead: 与较旧的浏览器一起使用的另一种方法是删除html5mode(true)
调用,并将以下地址改为使用hash + slash:
http://127.0.0.1:8080/test.html#/?target=bob
The relevant documentation is at Developer Guide: Angular Services: Using $location (strange that my google search didn't find this...). 相关文档位于开发人员指南:Angular Services:使用$ location (奇怪的是,我的Google搜索未找到此...)。
#4楼
Good that you've managed to get it working with the html5 mode but it is also possible to make it work in the hashbang mode. 很好,您已经设法使其在html5模式下工作,但也可以使其在hashbang模式下工作。
You could simply use: 您可以简单地使用:
$location.search().target
to get access to the 'target' search param. 可以访问“目标”搜索参数。
For the reference, here is the working jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/ 供参考,这里是工作中的jsFiddle: http ://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/
var myApp = angular.module('myApp', []); function MyCtrl($scope, $location) { $scope.location = $location; $scope.$watch('location.search()', function() { $scope.target = ($location.search()).target; }, true); $scope.changeTarget = function(name) { $location.search('target', name); } }
<div ng-controller="MyCtrl"> <a href="#!/test/?target=Bob">Bob</a> <a href="#!/test/?target=Paul">Paul</a> <hr/> URL 'target' param getter: {{target}}<br> Full url: {{location.absUrl()}} <hr/> <button ng-click="changeTarget('Pawel')">target=Pawel</button> </div>
#5楼
您还可以使用$ location。$$ search.yourparameter
#6楼
this may help uou 这可能会帮助你
What's the most concise way to read query parameters in AngularJS 在AngularJS中读取查询参数的最简洁方法是什么
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
($location.search()).target