Obtenir les valeurs de la chaîne de requête dans une URL à l'aide de AngularJS $ location

95

Concernant $ location.search, la documentation dit,

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

Dans mon url, ma chaîne de requête a un paramètre «? Test_user_bLzgB» sans valeur. «$ Location.search ()» renvoie également un objet. Comment obtenir le texte réel?

javascript  angularjs 
— Ian Warburton
source
Quel objet obtenez-vous? Avez-vous un plunkr ou un violon qui démontre le problème auquel vous êtes confronté? Vous avez raison lorsque vous utilisez $location.search()mais je souhaite vérifier l '"objet" que vous obtenez lorsque vous l'appelez ...
— callmekatootie
Je ne sais pas de quel objet il s'agit. J'ai essayé d'énumérer les propriétés mais il ne semble pas y en avoir.
— Ian Warburton
Je ne sais pas comment faire un violon qui examine une chaîne de requête.
— Ian Warburton

Réponses:

151

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

$location.search()renverra 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 true. 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 (comme il ira sur http://fiddle.jshell.net/#/url , ce qui créerait un nouveau violon), ce violon ne fonctionnera pas dans les navigateurs qui ne prennent pas en charge l'historique js (ne fonctionnera pas dans IE <10)

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

— TheSharpieOne
source
3
Comme Naresh l'a mentionné, $locationProviderdoit également être configuré correctement: code.angularjs.org/1.2.23/docs/guide/… (Cela m'a fait trébucher. J'espère que le lien
— fera
2
Pour configurer le fournisseur d'emplacement, vous avez besoin de: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Vous avez également besoin d'une balise de base dans le fichier HTML: <base href = "/">
— Amin Ariana
Merci pour l'inspiration et les conseils utiles, partagez simplement mon cas. Je crée une constante appelée userConfig et mets tout à l'intérieur, certains paramètres peuvent être remplacés par une chaîne de requête pour la flexibilité de l'utilisateur. J'utilise ceci et mets la requête dans une variable de portée globalController qui se trouve dans une balise HTML afin que tout contrôleur enfant puisse prendre le paramètre, y compris le service. Parce que userConfig est également mis dans le Service. Donc virtuellement, ils peuvent interagir ensemble.
— simongcc
J'ai trouvé plus facile d'utiliser simplement une fonction js, $ location.search () a de nombreuses pièces mobiles. Il existe de nombreux exemples de code pour obtenir des paramètres de chaîne de requête.
— nuander
@TheSharpieOne si vous avez un moment, pourriez-vous jeter un œil à cette question? stackoverflow.com/questions/43121888/…
— Leon Gaban
48

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

— Andersh
source
11
Comment n'est-ce pas une réponse? Peut-être qu'il est un peu court, mais il ne semble répondre à la question.
— Léo Lam
Si vous vérifiez les horodatages, la réponse a été modifiée 2 heures après le commentaire de Dan. Ce n'est vraiment pas si important, mais j'ai trouvé choquant que le commentaire de Leo soit voté, alors j'ai pensé le souligner.
— Bill Tarbell
39

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

?user=test_user_bLzgB

Vous pouvez facilement obtenir le texte comme ceci:

$location.search().user

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

et appeler 

$location.hash()

renverrait «test_user_bLzgB» qui sont les 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 hashbang au lieu de celle html5 ... Pour que cela fonctionne, ajoutez cette configuration à votre module 

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

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

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

— MasoodUrRehman
source
10

vous pouvez également 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');
— Rolwin Crasta
source
3
Vous avez copié cette fonction à partir d'une autre réponse SOF ... mieux vaut référencer votre source.
— arcseldon
Oui, c'est ce que j'utilise, je l'ai obtenu de quelque part sur SO
— nuander
10

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

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

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

2) <base href="https://stackoverflow.com/">est présent dans votre HTML

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

Références:

  1. base href = "/"
  2. html5Mode
— Mahesh
source
"html5Mode (true) est configuré dans la configuration du module de l'application" - expliquez
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Désolé, je voulais dire qu'il est configuré dans la méthode de configuration d'un objet d'application angulaire. Par exemple, le voici: var appModule = angular.module ('myAppModule', []);
— Mahesh
Merci, je suis assez nouveau dans Angular
— 15ee8f99-57ff-4f92-890c-b56153
Oui, c'est si important, confronté au même problème
— Bahadir Tasdemir
7

Angular ne prend pas en charge ce type de chaîne de requête.

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

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

— réécrit
source
0

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

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

  1. source de script vers angular-route.js
  2. Injectez 'ngRoute' dans les dépendances de votre module d'application
  3. Configurez votre emplacement
  4. Ajoutez la balise de base pour $ location (si vous ne le faites pas, votre search (). X1 ne renvoie rien ou n'est pas défini. Ou si la balise de base contient des informations erronées, votre navigateur ne pourra pas trouver vos fichiers dans le script src qui vos besoins .html. Ouvrez toujours la source d'affichage de la page pour tester les emplacements de vos fichiers!)
  5. appeler le service de localisation (search ())

ma list1.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

— Feuille de Jenna
source
0

Mon correctif est plus simple, créer une usine et l'implémenter comme une 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>
Développer l'extrait

— Ivan Fretes
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.