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

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:

— 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

fonte do script para angular-route.js
Injetar 'ngRoute' nas dependências do módulo do aplicativo
Config your locationProvider
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!)
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