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

95

关于$ location.search，文档说，

不带任何参数调用时返回当前URL的搜索部分（作为对象）。

在我的网址中，我的查询字符串包含一个不带值的参数'？test_user_bLzgB'。同样，'$ location.search（）'返回一个对象。我如何获得实际的文字？

javascript  angularjs 
— 伊恩·沃伯顿
source
你得到什么对象？您有没有表现出您所面对的问题的傻瓜或小提琴？您在使用时是正确的，$location.search()但是我希望检查您在调用它时得到的“对象” ...
— callmekatootie 2013年
我不知道这是什么对象。我尝试枚举属性，但似乎没有任何属性。
— 伊恩·沃伯顿2013年
不知道如何做一个检查查询字符串的小提琴。
— 伊恩·沃伯顿

Answers:

151

自从接受了接受的答案以来，不确定它是否已更改，但是有可能。

$location.search()将返回键值对的对象，该对象与查询字符串相同。没有值的键只是作为true存储在对象中。在这种情况下，对象将是：

{"test_user_bLzgB": true}

您可以直接使用 $location.search().test_user_bLzgB

示例（带有更大的查询字符串）：http : //fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

注意：由于哈希值（它将转到http://fiddle.jshell.net/#/url，这将创建一个新的小提琴），因此该小提琴在不支持js历史记录的浏览器中将不起作用（将不起作用）在IE <10中）

编辑：
正如@Naresh和@DavidTchepak的评论中指出的，$locationProvider还需要正确配置：https : //code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

— 夏普一号
source
3
正如Naresh所提到的，$locationProvider还需要正确配置：code.angularjs.org/1.2.23/docs/guide/…（这让我绊倒了。希望链接可以节省其他时间。）
— David Tchepak 2014年
2
要配置位置提供程序，您需要：window.app.config ['$ locationProvider'，（$ locationProvider）-> $ locationProvider.html5Mode true]，您还需要HTML文件中的基本标记：<base href =“ /”>
— 阿敏·阿里亚纳
感谢您的指责和有用的提示，请分享我的情况。我创建了一个名为userConfig的常量，并将所有内容放入其中，可以通过查询字符串覆盖某些设置以提高用户的灵活性。我使用它并将查询放入HTML标记中的globalController范围变量中，以便任何子控制器都可以采用包括service在内的参数。因为userConfig也放置在Service中。因此，实际上，它们可以一起交互。
— simongcc 2015年
我发现仅使用js函数会更容易，$ location.search（）对于许多活动部件都有。有很多代码示例可用于获取查询字符串参数。
— nuander
@TheSharpieOne，如果您有时间，可以看看这个问题吗？stackoverflow.com/questions/43121888/...
— 莱昂Gaban
48

如果只需要将查询字符串视为文本，则可以使用： $window.location.search

— 安德什
source
11
这怎么不是答案？也许有点短，但是似乎确实可以回答这个问题。
— 莱奥林
如果您检查时间戳记，答案将在Dan发表评论2小时后进行编辑。确实不是那么重要，但是我感到震惊的是，狮子座的评论遭到了批评，所以我想指出这一点。
— 比尔·塔贝尔
39

$location.search()返回一个对象，该对象由作为变量的键和作为其值的值组成。因此：如果您这样编写查询字符串：

?user=test_user_bLzgB

您可以像这样轻松获得文本：

$location.search().user

如果您不希望使用像？foo = bar这样的键值，建议使用#test_user_bLzgB哈希值，

并打电话 

$location.hash()

将返回“ test_user_bLzgB”，这是您希望检索的数据。

附加信息：

如果您使用查询字符串方法并且通过$ location.search（）得到一个空对象，则可能是因为Angular使用的是hashbang策略而不是html5。模组 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
— 阿列扬德罗恰蒂
source
13

首先，使URL格式正确以获取查询字符串，请使用对我有用的＃？q = string

http://localhost/codeschool/index.php#?foo=abcd

将$ location服务注入控制器

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

所以输出应该是abcd

— MasoodUrRehman
source
10

你也可以用这个

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');
— 罗尔文·克拉斯塔（Rolwin Crasta）
source
3
您已从另一个SOF答案中复制了该功能...最好参考您的源代码。
— arcseldon'7
是的，这就是我使用的，是从SO上的某处获得的
— nuander
10

如果您$location.search()不工作，请确保您具有以下条件：

1）html5Mode(true)在应用程序的模块配置中配置

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

2）<base href="https://stackoverflow.com/">存在于您的HTML中

<head>
  <base href="/">
  ...
</head>

参考文献：

  1. 基本href =“ /”
  2. html5Mode
— 马赫什
source
“在应用程序的模块配置中配置了html5Mode（true）”-解释
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett-抱歉，我的意思是说它是在有角度的应用程序对象的config方法中配置的。例如，这里是：var appModule = angular.module（'myAppModule'，[]）;
— Mahesh
谢谢，我是Angular的
— 新手
是的，这是如此重要，面临同样的问题
— 巴哈迪尔·塔斯底米尔
7

Angular不支持这种查询字符串。

URL的查询部分应该是&键值对的-分隔序列，因此可以完美地解释为一个对象。

根本没有用于管理不代表键/值对集合的查询字符串的API。

— 改写
source
0

在我的NodeJS示例中，我有一个要遍历并获取值的URL“ localhost：8080 / Lists / list1.html？x1 = y”。

为了使用$ location.search（）获得x1 = y，我做了几件事

  1. 脚本源到angular-route.js
  2. 将“ ngRoute”注入到您的应用模块的依赖项中
  3. 配置您的locationProvider
  4. 添加$ location的基本标记（如果不这样，则search（）。x1将不返回任何内容或未定义。或者，如果基本标记的信息有误，浏览器将无法在脚本src中找到文件您的.html需求。请始终打开页面的视图源以测试您的文件位置！）
  5. 调用位置服务（search（））

我的list1.js有

    var app = angular.module('NGApp', ['ngRoute']);  //dependencies : ngRoute
    app.config(function ($locationProvider) { //config your locationProvider
         $locationProvider.html5Mode(true).hashPrefix('');
    });

    app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
        //var val = window.location.href.toString().split('=')[1];
        var val = $location.search().x1;    alert(val);
        $scope.xout = function () {
           datasvc.out(val)
           .then(function (data) {
              $scope.x1 = val;
              $scope.allMyStuffs = data.all;
           });
        };
        $scope.xout();
    });

我的list1.html有

<head>
    <base href=".">
    </head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>

指南：https：//code.angularjs.org/1.2.23/docs/guide/$location

— 珍娜·叶
source
0

我的解决方法更简单，创建一个工厂，并将其实现为一个变量。例如

angular.module('myApp', [])

// This a searchCustom factory. Copy the factory and implement in the controller
.factory("searchCustom", function($http,$log){    
    return {
        valuesParams : function(params){
            paramsResult = [];
            params = params.replace('(', '').replace(')','').split("&");
            
            for(x in params){
                paramsKeyTmp = params[x].split("=");
                
                // Si el parametro esta disponible anexamos al vector paramResult
                if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && 
                    paramsKeyTmp[1] !== null){          
                    
                    paramsResult.push(params[x]);
                }
            }
            
            return paramsResult;
        }
    }
})

.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){
    $ctrl = this;
    
    var valueParams = searchCustom.valuesParams($routeParams.value);
    valueParams = valueParams.join('&');

    $http({
        method : "GET",
        url: webservice+"q?"+valueParams
    }).then( function successCallback(response){
        data = response.data;
        $scope.cantEncontrados = data.length; 
        $scope.dataSearch = data;
        
    } , function errorCallback(response){
        console.log(response.statusText);
    })
      
})
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="SearchController">
<form action="#" >
                          
                            
                            <input ng-model="param1" 
                                   placeholder="param1" />
                            
                            <input  ng-model="param2" 
                                    placeholder="param2"/>
                        
<!-- Implement in the html code 
(param1={{param1}}&param2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->          
                        <a href="#seach/(param1={{param1}}&param2={{param2}})">
                            <buttom ng-click="searchData()" >Busqueda</buttom>
                        </a>
                    </form> 
</div>
</body>
展开摘要

— 伊万·弗雷特斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.