AngularJS：如何在链接中不使用哈希标记获取查询字符串的值

Question

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

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

当我应用var goto = $location.search()['sportsId'];时，它返回undefined。

但是，如果我在url中添加hash，如Url: http://localhost/example.php#?sportsId=3

那么它会返回正确的值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']在hash格式下不起作用。

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

- Farjad Hasan

---

我认为以下问题可以帮助您解决问题。https://dev59.com/Y2gu5IYBdhLWcg3wzKEc - Amit Sirohiya

Answer 1

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

- prototype

---

好的，只需要解码字符串：res = decodeURIComponent(sParameterName[1].replace(/+/g, " "))；该代码段将把第一个参数中的加号替换为空格，并对其进行URL解码。 - dprothero

Answer 2

三个简单的步骤让工作完成了：

1. 通过将以下代码添加到您的控制器/服务中，为HTML5模式配置angular：

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

2. 在您的HTML中添加基础元素：

<base href="/">

3. 将"$location"注入到你的angular控制器中:

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

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

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

答案已经在之前的回答中提到了，我只是为了更好地理解进行了概括。希望有人能从中受益。

- Dash

Answer 3

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

- gamliela

Answer 4

请参考以下链接。

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

使用AngularJS $location获取URL中查询字符串的值

- Arepalli Praveenkumar

---

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

这个答案要求你调整$locationProvider，但并不适用于所有情况。 - James

Answer 5

您需要使用

$location.search()

这将返回一个带有您的参数的对象，假设您有url?param1=val&param2=val2

这将返回以下结果

{ param1 : val, param2 : val2 }

还要确保你启用了

标签。

$locationProvider.html5Mode(true);  

- Chris Noring

Answer 6

使用以下代码从$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工厂，您可以在任何地方使用它。这将合并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;

- CraftyFella

---

我不知道，但这看起来是一个简单操作的过多代码。 - gamliela