Recupero dei valori dalla stringa di query in un URL utilizzando AngularJS $ location

95

Per quanto riguarda $ location.search, i documenti dicono,

Restituisce la parte di ricerca (come oggetto) dell'URL corrente quando viene chiamato senza alcun parametro.

Nel mio URL, la mia stringa di query ha un parametro "? Test_user_bLzgB" senza un valore. Anche '$ location.search ()' restituisce un oggetto. Come ottengo il testo effettivo?

javascript  angularjs 
— Ian Warburton
fonte
Quale oggetto ottieni? Hai un plunkr o un violino che dimostra il problema che stai affrontando? Hai ragione quando lo usi $location.search()ma desidero controllare l '"oggetto" che ottieni quando lo chiami ...
— callmekatootie
Non so che oggetto sia. Ho provato a enumerare le proprietà ma sembra che non ce ne siano.
— Ian Warburton
Non sono sicuro di come eseguire un violino che esamina una stringa di query.
— Ian Warburton

Risposte:

151

Non sono sicuro che sia cambiato da quando la risposta accettata è stata accettata, ma è possibile.

$location.search()restituirà un oggetto di coppie chiave-valore, le stesse coppie della stringa di query. Una chiave che non ha valore viene semplicemente memorizzata nell'oggetto come true. In questo caso, l'oggetto sarebbe:

{"test_user_bLzgB": true}

Puoi accedere a questo valore direttamente con $location.search().test_user_bLzgB

Esempio (con stringa di query più grande): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Nota: a causa degli hash (poiché andrà a http://fiddle.jshell.net/#/url , che creerebbe un nuovo violino), questo violino non funzionerà nei browser che non supportano la cronologia js (non funzionerà in IE <10)

Modifica:
come sottolineato nei commenti di @Naresh e @DavidTchepak, $locationProvideranche il deve essere configurato correttamente: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

— TheSharpieOne
fonte
3
Come accennato da Naresh, $locationProviderdeve anche essere configurato correttamente: code.angularjs.org/1.2.23/docs/guide/… (Questo mi ha fatto inciampare. Spero che il collegamento faccia risparmiare un po 'di tempo ad altri.)
— David Tchepak
2
Per configurare il provider di posizione, è necessario: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] È inoltre necessario un tag di base nel file HTML: <base href = "/">
— Amin Ariana
Grazie per la stima e i suggerimenti utili, condividi il mio caso. Creo una costante chiamata userConfig e metto tutto dentro, alcune impostazioni possono essere sovrascritte dalla stringa di query per la flessibilità dell'utente. Lo uso e inserisco la query in una variabile di ambito globalController che si trova nel tag HTML in modo che qualsiasi controller figlio possa accettare il parametro incluso il servizio. Perché anche userConfig viene inserito nel Service. Quindi virtualmente possono interagire insieme.
— simongcc
Ho trovato più facile usare solo una funzione js, $ location.search () ha molte parti mobili. Esistono numerosi esempi di codice per ottenere i parametri della stringa di query.
— nuander
@TheSharpieOne se hai un momento potresti dare un'occhiata a questa domanda? stackoverflow.com/questions/43121888/…
— Leon Gaban
48

Se hai solo bisogno di guardare la stringa di query come testo, puoi usare: $window.location.search

— andersh
fonte
11
Come mai questa non è una risposta? Forse è un po 'corta, ma non sembra rispondere alla domanda.
— Léo Lam
Se controlli i timestamp, la risposta è stata modificata 2 ore dopo il commento di Dan. Non è davvero così importante, ma ho trovato scioccante che il commento di Leo fosse stato votato in modo negativo, quindi ho pensato di farlo notare.
— Bill Tarbell
39

$location.search()restituisce un oggetto, costituito dalle chiavi come variabili e dai valori come suo valore. Quindi: se scrivi la stringa di query in questo modo:

?user=test_user_bLzgB

Potresti facilmente ottenere il testo in questo modo:

$location.search().user

Se non desideri utilizzare una chiave, un valore come? Foo = bar, ti suggerisco di utilizzare un hash #test_user_bLzgB,

e chiamando 

$location.hash()

restituirebbe "test_user_bLzgB" che sono i dati che desideri recuperare.

Informazioni addizionali:

Se hai utilizzato il metodo della stringa di query e stai ottenendo un oggetto vuoto con $ location.search (), è probabilmente perché Angular sta usando la strategia hashbang invece di quella html5 ... Per farlo funzionare, aggiungi questa configurazione al tuo modulo 

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

Per prima cosa, assicurati che il formato dell'URL sia corretto per ottenere la stringa di query, usa #? Q = string che funziona per me

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

Iniettare $ location service nel controller

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Quindi l'uscita dovrebbe essere abcd

— MasoodUrRehman
fonte
10

puoi usare anche questo

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
fonte
3
Hai copiato quella funzione da un'altra risposta SOF ... meglio fare riferimento alla tua fonte.
— arcseldon
Sì, questo è quello che uso, l'ho preso da qualche parte su SO
— nuander
10

Se il tuo $location.search()non funziona, assicurati di avere quanto segue:

1) html5Mode(true)è configurato nella configurazione del modulo dell'app

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

2) <base href="https://stackoverflow.com/">è presente nel tuo HTML

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

Riferimenti:

  1. base href = "/"
  2. html5Mode
— Mahesh
fonte
"html5Mode (true) è configurato nella configurazione del modulo dell'app" - spiega
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Scusa, volevo dire che è configurato nel metodo di configurazione di un oggetto app angolare. Ad esempio, eccolo: var appModule = angular.module ('myAppModule', []);
— Mahesh
Grazie, sono abbastanza nuovo su Angular
— 15ee8f99-57ff-4f92-890c-b56153
Sì, è così importante, ha affrontato lo stesso problema
— Bahadir Tasdemir
7

Angular non supporta questo tipo di stringa di query.

La parte della query dell'URL dovrebbe essere un file & sequenza separata di coppie chiave-valore, quindi perfettamente interpretabile come un oggetto.

Non esiste alcuna API per gestire le stringhe di query che non rappresentano set di coppie chiave-valore.

— riscritto
fonte
0

Nel mio esempio NodeJS, ho un URL "localhost: 8080 / Lists / list1.html? X1 = y" che voglio attraversare e acquisire valori.

Per lavorare con $ location.search () per ottenere x1 = y, ho fatto alcune cose

  1. sorgente dello script in angular-route.js
  2. Iniettare "ngRoute" nelle dipendenze del modulo dell'app
  3. Configura il tuo provider di posizione
  4. Aggiungi il tag di base per $ location (se non lo fai, la tua ricerca (). X1 non restituirà nulla o non sarà definito. Oppure se il tag di base ha le informazioni sbagliate, il tuo browser non sarebbe in grado di trovare i tuoi file all'interno di script src che le tue esigenze .html. Apri sempre la sorgente di visualizzazione della pagina per testare le posizioni dei tuoi file!)
  5. invoca il servizio di localizzazione (search ())

il mio list1.js ha

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

e il mio list1.html ha

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

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

— Jenna Leaf
fonte
0

La mia soluzione è più semplice, creare una fabbrica e implementarla come una variabile. Per esempio

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>
Espandi lo snippet

— Ivan Fretes
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.