Javascript AngularJS：获取链接中没有散列的查询字符串值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29534612/
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
AngularJS: Get query string values without a hash in the link
提问by Farjad Hasan
I am trying to get query string values using angularjs.
我正在尝试使用 angularjs 获取查询字符串值。
my Url: http://localhost/example.php?sportsId=3
我的网址： http://localhost/example.php?sportsId=3
when I applied var goto = $location.search()['sportsId'];it returns me undefined.
当我应用var goto = $location.search()['sportsId'];它返回我未定义。
However, if I add hash in url like Url: http://localhost/example.php#?sportsId=3
但是，如果我在 url 中添加哈希 Url: http://localhost/example.php#?sportsId=3
then it returns me correct value 3.
然后它返回我正确的值 3。
But in this case, it also gives me Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D
但在这种情况下，它也给了我 Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D
Also, my default $_REQUEST['sportsId']is not working with hash format.
此外，我的默认设置$_REQUEST['sportsId']不适用于哈希格式。
How can I correctly get values from query string by using angularjs?
如何使用 angularjs 从查询字符串中正确获取值？
回答by prototype
I know this is not Angular but its pure JS and works like a charm (just don't add dummyPath and it will take the URL).
我知道这不是 Angular 而是它的纯 JS 并且像魅力一样工作（只是不要添加 dummyPath 并且它将采用 URL）。
function getUrlParameter(param, dummyPath) {
var sPageURL = dummyPath || window.location.search.substring(1),
sURLVariables = sPageURL.split(/[&||?]/),
res;
for (var i = 0; i < sURLVariables.length; i += 1) {
var paramName = sURLVariables[i],
sParameterName = (paramName || '').split('=');
if (sParameterName[0] === param) {
res = sParameterName[1];
}
}
return res;
}
Usage:
用法：
var sportdsId = getUrlParameter('sportsId');
回答by Dash
Three simple steps did the Job:
三个简单的步骤完成了工作：
Config angular for HTML5 mode by adding the following code to your controller/service:
app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode(true); }]);
Add base element to your HTML:
通过将以下代码添加到您的控制器/服务来为 HTML5 模式配置 angular：
app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode(true); }]);
将基本元素添加到您的 HTML：
<base href="/">Inject "$location" into your angular controller:
app.controller('ABCController', ['$scope', '$location', ABCController]);
将“$location”注入你的角度控制器：
app.controller('ABCController', ['$scope', '$location', ABCController]);
Finally to get the query string use the following code:
最后要获取查询字符串，请使用以下代码：
var yourId = $location.search().yourId;
The answer is already there in previous answers, I just summarized for better understanding. Hopefully somebody will become beneficial from it.
答案已经在之前的答案中了，我只是总结一下以便更好地理解。希望有人会从中受益。
回答by gamliela
This is what I use. It's essentially the same as the accepted answer but returns all parameters as an object and handle decoding of url components.
这就是我使用的。它本质上与接受的答案相同，但将所有参数作为对象返回并处理 url 组件的解码。
function getUrlParameters() {
var pairs = window.location.search.substring(1).split(/[&?]/);
var res = {}, i, pair;
for (i = 0; i < pairs.length; i++) {
pair = pairs[i].split('=');
if (pair[1])
res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
return res;
}
回答by Arepalli Praveenkumar
Please refer below links
请参考以下链接
var goto = $location.search().sportsId;
Getting values from query string in an url using AngularJS $location
回答by Chris Noring
You need to use
你需要使用
$location.search()
This returns an object with your params so lets say you have url?param1=val¶m2=val2
这将返回一个带有您的参数的对象，因此可以说您有 url?param1=val¶m2=val2
This will give the following back
这将返回以下内容
{ param1 : val, param2 : val2 }
Also make sure you enable
还要确保您启用
$locationProvider.html5Mode(true);
回答by CraftyFella
Create your self a search object from the the $window.location.searchproperty using the following:
$window.location.search使用以下内容从属性创建您自己的搜索对象：
var search = $window.location.search
.split(/[&||?]/)
.filter(function (x) { return x.indexOf("=") > -1; })
.map(function (x) { return x.split(/=/); })
.map(function (x) {
x[1] = x[1].replace(/\+/g, " ");
return x;
})
.reduce(function (acc, current) {
acc[current[0]] = current[1];
return acc;
}, {});
var sportsId = search.sportsId;
or create a queryStringfactory which you can use anywhere.. This combines the left and right parts of the queryString.. I.e. before #and after the #
或者创建一个queryString你可以在任何地方使用的工厂..这结合了queryString的左右部分..即之前#和之后#
(function () {
"use strict";
angular
.module("myModuleName")
.factory("queryString", QueryStringFactory);
function QueryStringFactory($window, $location) {
function search() {
var left = $window.location.search
.split(/[&||?]/)
.filter(function (x) { return x.indexOf("=") > -1; })
.map(function (x) { return x.split(/=/); })
.map(function (x) {
x[1] = x[1].replace(/\+/g, " ");
return x;
})
.reduce(function (acc, current) {
acc[current[0]] = current[1];
return acc;
}, {});
var right = $location.search() || {};
var leftAndRight = Object.keys(right)
.reduce(function(acc, current) {
acc[current] = right[current];
return acc;
}, left);
return leftAndRight;
}
return {
search: search
};
}
}());
usage:
用法：
var qs = queryString.search();
var sportsId = sq.sportsId;
