Obtendo valores da string de consulta em um url usando AngularJS $ location

95

Em relação a $ location.search, os documentos dizem:

Retorna a parte de pesquisa (como objeto) da url atual quando chamada sem qualquer parâmetro.

Em meu url, minha string de consulta tem um parâmetro '? Test_user_bLzgB' sem um valor. Além disso, '$ location.search ()' retorna um objeto. Como obtenho o texto real?

javascript angularjs Ian Warburton
fonte
Que objeto você pega? Você tem um plunkr ou um violino que demonstra o problema que você enfrenta? Você está correto quando usa, $location.search()mas eu gostaria de verificar o "objeto" que você obtém ao chamá-lo ...
callmekatootie
Não sei que objeto é. Tentei enumerar as propriedades, mas não parece haver nenhuma.
Ian Warburton
Não tenho certeza de como fazer um violino que examina uma string de consulta.
Ian Warburton

Respostas:

151

Não tenho certeza se mudou desde que a resposta aceita foi aceita, mas é possível.

$location.search()retornará um objeto de pares de valores-chave, os mesmos pares da string de consulta. Uma chave sem valor é apenas armazenada no objeto como verdadeira. Nesse caso, o objeto seria:

{"test_user_bLzgB": true}

Você pode acessar este valor diretamente com $location.search().test_user_bLzgB

Exemplo (com string de consulta maior): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Nota: Devido aos hashes (pois irá para http://fiddle.jshell.net/#/url , o que criaria um novo fiddle), este fiddle não funcionará em navegadores que não suportam js history (não funcionará no IE <10)

Edit:
Conforme apontado nos comentários de @Naresh e @DavidTchepak, o $locationProvidertambém precisa ser configurado corretamente: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

TheSharpieOne
fonte
3
Como Naresh mencionou, $locationProvidertambém precisa ser configurado corretamente: code.angularjs.org/1.2.23/docs/guide/… (Isso me fez tropeçar. Espero que o link economize algum tempo para outros.)
David Tchepak
2
Para configurar o provedor de localização, você precisa de: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Você também precisa de uma tag base no arquivo HTML: <base href = "/">
Amin Ariana
Obrigado pela inspiração e dicas úteis, apenas compartilhe meu caso. Eu crio uma constante chamada userConfig e coloco tudo dentro, algumas configurações podem ser substituídas por string de consulta para flexibilidade do usuário. Eu uso isso e coloco a consulta em uma variável de escopo globalController que está na tag HTML para que qualquer controlador filho possa pegar o parâmetro incluindo serviço. Porque o userConfig também é colocado no Service. Assim, virtualmente, eles podem interagir juntos.
simongcc
Achei mais fácil usar apenas uma função js, ​​$ location.search () tem muitas partes móveis. Existem muitos exemplos de código para obter parâmetros de string de consulta.
nuander
@TheSharpieOne se você tiver um momento, você poderia dar uma olhada nesta pergunta? stackoverflow.com/questions/43121888/…
Leon Gaban
48

Se você só precisa ver a string de consulta como texto, pode usar: $window.location.search

Andersh
fonte
11
Como isso não é uma resposta? Talvez seja um pouco curto, mas não parecem responder à pergunta.
Léo Lam
Se você verificar os carimbos de data / hora, a resposta foi editada 2 horas após o comentário de Dan. Não é tão importante, mas achei chocante que o comentário de Leo estivesse sendo votado positivamente, então pensei em apontar isso.
Bill Tarbell
39

$location.search()retorna um objeto, consistindo nas chaves como variáveis ​​e nos valores como seu valor. Então: se você escrever sua string de consulta assim:

?user=test_user_bLzgB

Você poderia facilmente obter o texto assim:

$location.search().user

Se você deseja não usar uma chave, valor como? Foo = bar, sugiro usar um hash #test_user_bLzgB,

e chamando 

$location.hash()

retornaria 'test_user_bLzgB' que são os dados que você deseja recuperar.

Informação adicional:

Se você usou o método de string de consulta e está obtendo um objeto vazio com $ location.search (), provavelmente é porque o Angular está usando a estratégia hashbang em vez de html5 ... Para fazê-lo funcionar, adicione esta configuração ao seu módulo 

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

Primeiro, faça o formato do URL correto para obter a string de consulta, use #? Q = string que funciona para mim

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

Injetar o serviço $ location no controlador

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Portanto, a saída deve ser abcd

MasoodUrRehman
fonte
10

você pode usar isso também

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
Você copiou essa função de outra resposta SOF ... melhor fazer referência à sua fonte.
arcseldon
Sim, é isso que eu uso, peguei em algum lugar no SO
nuander
10

Se seu $location.search() não estiver funcionando, certifique-se de ter o seguinte:

1) html5Mode(true)está configurado na configuração do módulo do aplicativo

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

2) <base href="https://stackoverflow.com/">está presente em seu HTML

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

Referências:

  1. base href = "/"
  2. html5Mode
Mahesh
fonte
"html5Mode (true) está configurado na configuração do módulo do app" - explain
15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Desculpe, eu quis dizer que está configurado no método de configuração de um objeto de aplicativo angular. Por exemplo, aqui está: var appModule = angular.module ('myAppModule', []);
Mahesh
Obrigado, sou muito novo no Angular
15ee8f99-57ff-4f92-890c-b56153
Sim, isso é tão importante, enfrentou o mesmo problema
Bahadir Tasdemir
7

O Angular não oferece suporte a esse tipo de string de consulta.

A parte da consulta do URL deve ser uma &sequência separada de pares de valores-chave, portanto, perfeitamente interpretável como um objeto.

Não há API para gerenciar strings de consulta que não representem conjuntos de pares de valores-chave.

reescrito
fonte
0

No meu exemplo NodeJS, tenho um url "localhost: 8080 / Lists / list1.html? X1 = y" que desejo percorrer e adquirir valores.

Para trabalhar com $ location.search () para obter x1 = y, fiz algumas coisas

  1. fonte do script para angular-route.js
  2. Injetar 'ngRoute' nas dependências do módulo do aplicativo
  3. Config your locationProvider
  4. Adicione a tag base para $ location (se não o fizer, sua pesquisa (). X1 não retornará nada ou indefinida. Ou se a tag base tiver a informação errada, seu navegador não será capaz de encontrar seus arquivos dentro do script src que suas necessidades .html. Sempre abra a fonte de visualização da página para testar os locais dos arquivos!)
  5. invocar o serviço de localização (search ())

meu list1.js tem

    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 meu list1.html tem

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

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

Folha de jenna
fonte
0

Minha correção é mais simples, criar uma fábrica e implementar como uma variável. Por exemplo

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

Ivan Fretes
fonte