web-dev-qa-db-fra.com

Obtention des valeurs d'une chaîne de requête dans une URL à l'aide de l'emplacement AngularJS $

En ce qui concerne $ location.search, les docs say,

Renvoie la partie de recherche (en tant qu'objet) de l'URL actuelle lorsqu'elle est appelée sans paramètre.

Dans mon URL, ma chaîne de requête a un paramètre '? Test_user_bLzgB' sans valeur. De plus, '$ location.search ()' renvoie un objet. Comment puis-je obtenir le texte actuel?

javascriptangularjs
92
Ian Warburton

Vous ne savez pas si cela a changé depuis que la réponse acceptée a été acceptée, mais c'est possible.

$location.search() retournera un objet de paires clé-valeur, les mêmes paires que la chaîne de requête. Une clé qui n'a aucune valeur est simplement stockée dans l'objet comme vraie. Dans ce cas, l'objet serait:

{"test_user_bLzgB": true}

Vous pouvez accéder à cette valeur directement avec $location.search().test_user_bLzgB

Exemple (avec une chaîne de requête plus grande): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Remarque: En raison des hachages (car il ira à http://fiddle.jshell.net/#/url , ce qui créerait un nouveau violon), ce violon ne fonctionnera pas dans les navigateurs ne prenant pas en charge l'historique js. (ne fonctionnera pas dans IE <10)

Modifier:
Comme indiqué dans les commentaires de @Naresh et @DavidTchepak, le $locationProvider doit également être configuré correctement: https://code.angularjs.org/1.2.23/docs/guide/$location#-location -service-configuration

147
TheSharpieOne

Si vous avez juste besoin de regarder la chaîne de requête sous forme de texte, vous pouvez utiliser: $window.location.search

47
andersh

$location.search() renvoie un objet composé des clés en tant que variables et des valeurs en tant que valeur. Donc, si vous écrivez votre chaîne de requête comme ceci: 

?user=test_user_bLzgB

Vous pouvez facilement obtenir le texte comme suit:

$location.search().user

Si vous ne souhaitez pas utiliser une clé, une valeur comme? Foo = bar, je suggère d'utiliser un hash #test_user_bLzgB,

et appeler 

$location.hash()

renverrait 'test_user_bLzgB' qui correspond aux données que vous souhaitez récupérer. 

Information additionnelle:

Si vous avez utilisé la méthode de la chaîne de requête et que vous obtenez un objet vide avec $ location.search (), , C'est probablement parce qu'Angular utilise la stratégie de hashbang au lieu de celle de html5 ... , ajoutez cette config à votre module 

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

Commencez par rendre le format de l'URL correct pour obtenir la chaîne de requête, utilisez #? Q = string 

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

Injecter le service $ location dans le contrôleur

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Donc, la sortie devrait être abcd  

13
MasoodUrRehman

vous pouvez aussi l'utiliser

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');
10
Rolwin C

Si votre $location.search() ne fonctionne pas, assurez-vous de disposer des éléments suivants:

1) html5Mode(true) est configuré dans le module de configuration de l'application

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

2) <base href="/"> est présent dans votre code HTML

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

Références: 

  1. base href = "/"
  2. html5Mode
9
Mahesh

Angular ne supporte pas ce type de chaîne de requête. 

La partie requête de l'URL est supposée être une séquence de paires clé-valeur séparée par &-, donc parfaitement interprétable en tant qu'objet. 

Il n'y a aucune API pour gérer des chaînes de requête qui ne représentent pas des ensembles de paires clé-valeur.

7
rewritten

Dans mon exemple NodeJS, j'ai l'URL "localhost: 8080/Lists/list1.html? X1 = y" que je veux parcourir et acquérir des valeurs.

Afin de travailler avec $ location.search () pour obtenir x1 = y, j'ai fait quelques choses

  1. source du script pour angular-route.js 
  2. Injectez 'ngRoute' dans les dépendances de votre module d'application 
  3. Configurer votre emplacementFournisseur 
  4. Ajoutez la balise de base pour $ location (si vous ne le faites pas, votre recherche (). X1 ne renverra rien ou ne sera pas définie. Sinon, si la balise de base contient des informations erronées, votre navigateur ne pourra pas trouver vos fichiers dans le script src qui Toujours ouvrir le code source de la page pour tester l’emplacement de vos fichiers!)
  5. invoquer le service de localisation (search ())

ma liste1.js a

    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();
    });

et ma liste1.html a

<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>

Guide: https://code.angularjs.org/1.2.23/docs/guide/$location

0
Jenna Leaf

Mon correctif est plus simple, créer une fabrique et l'implémenter comme une seule variable. Par exemple

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>

0
Ivan Fretes