AngularJS：获取链接中没有哈希的查询字符串值

Posted 2023-02-24

【中文标题】AngularJS：获取链接中没有哈希的查询字符串值

【英文标题】：AngularJS: Get query string values without a hash in the link

【发布时间】：2015-06-14 14:08:49

【问题描述】：

我正在尝试使用 angularjs 获取查询字符串值。

我的网址：http://localhost/example.php?sportsId=3

当我申请var goto = $location.search()['sportsId']; 它返回我未定义。

但是，如果我在像 Url: http://localhost/example.php#?sportsId=3 这样的 url 中添加哈希

然后它返回正确的值 3。

但在这种情况下，它也给了我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

另外，我的默认 $_REQUEST['sportsId'] 不适用于哈希格式。

如何使用 angularjs 从查询字符串中正确获取值？

【问题讨论】：

我认为以下问题可以帮助您解决问题。 [***.com/questions/11063673/…[1]：***.com/questions/11063673/…

【参考方案1】：

这是我使用的。它与接受的答案基本相同，但将所有参数作为对象返回并处理 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;

【参考方案2】：

完成这项工作的三个简单步骤：

通过将以下代码添加到您的控制器/服务来配置 html5 模式的角度：

app.config(['$locationProvider', function ($locationProvider) $locationProvider.html5Mode(true); ]);

将基本元素添加到您的 HTML：

<base href="/">

将“$location”注入您的角度控制器：

app.controller('ABCController', ['$scope', '$location', ABCController]);

最后使用以下代码获取查询字符串：

var yourId = $location.search().yourId;

答案已经在之前的答案中了，我只是为了更好地理解而总结了。希望有人会从中受益。

【参考方案3】：

使用以下方法从$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;

或创建一个您可以在任何地方使用的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
        ;

    

());

用法：

var qs = queryString.search();
var sportsId = sq.sportsId;

【讨论】：

我不知道，但是对于一个简单的操作来说，看起来代码太多了。

【参考方案4】：

我知道这不是 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;

用法：

var sportdsId = getUrlParameter('sportsId');

【讨论】：

不错。只需要解码字符串： res = decodeURIComponent(sParameterName[1].replace(/\+/g, " "));

【参考方案5】：

你需要使用

$location.search()

这会返回一个带有你的参数的对象，所以假设你有 url?param1=val&param2=val2

这将返回以下内容

 param1 : val, param2 : val2 

还要确保启用

$locationProvider.html5Mode(true);  

【参考方案6】：

请参考以下链接

var goto = $location.search().sportsId;

Getting values from query string in an url using AngularJS $location

【讨论】：

var goto = $location.search().sportsId;不起作用。返回我未定义

这个答案需要你调整你的 $locationProvider ，这可能不是在所有情况下都有效。