Obtener valores de la cadena de consulta en una URL usando AngularJS $ location

95

Con respecto a $ location.search, los documentos dicen:

Devuelve la parte de búsqueda (como objeto) de la URL actual cuando se llama sin ningún parámetro.

En mi URL, mi cadena de consulta tiene un parámetro '? Test_user_bLzgB' sin un valor. Además, '$ location.search ()' devuelve un objeto. ¿Cómo obtengo el texto real?

javascript angularjs Ian Warburton
fuente
¿Qué objeto obtienes? ¿Tiene un plunkr o un violín que demuestre el problema que enfrenta? Tiene razón cuando lo usa, $location.search()pero deseo verificar el "objeto" que obtiene cuando lo llama ...
callmekatootie
No sé qué objeto es. Intenté enumerar las propiedades, pero no parece haber ninguna.
Ian Warburton
No estoy seguro de cómo hacer un violín que examina una cadena de consulta.
Ian Warburton

Respuestas:

151

No estoy seguro de si ha cambiado desde que se aceptó la respuesta aceptada, pero es posible.

$location.search()devolverá un objeto de pares clave-valor, los mismos pares que la cadena de consulta. Una clave que no tiene valor simplemente se almacena en el objeto como verdadera. En este caso, el objeto sería:

{"test_user_bLzgB": true}

Puede acceder a este valor directamente con $location.search().test_user_bLzgB

Ejemplo (con una cadena de consulta más grande): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Nota: Debido a los hashes (ya que irá a http://fiddle.jshell.net/#/url , que crearía un nuevo violín), este violín no funcionará en navegadores que no admitan el historial de js (no funcionará en IE <10)

Editar:
como se señaló en los comentarios de @Naresh y @DavidTchepak, $locationProvidertambién debe configurarse correctamente: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

TheSharpieOne
fuente
3
Como mencionó Naresh, $locationProvidertambién debe configurarse correctamente: code.angularjs.org/1.2.23/docs/guide/… (Esto me hizo tropezar. Con suerte, el enlace les ahorrará tiempo a otros).
David Tchepak
2
Para configurar el proveedor de ubicación, necesita: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] También necesita una etiqueta base en el archivo HTML: <base href = "/">
Amin Ariana
Gracias por la inspiración y los útiles consejos, solo comparte mi caso. Creo una constante llamada userConfig y pongo todo dentro, algunas configuraciones pueden ser anuladas por una cadena de consulta para la flexibilidad del usuario. Utilizo esto y coloco la consulta en una variable de alcance globalController que está en la etiqueta HTML para que cualquier controlador secundario pueda tomar el parámetro, incluido el servicio. Porque el userConfig también se coloca en el Service. Entonces, virtualmente, pueden interactuar juntos.
simongcc
Me resultó más fácil usar una función js, $ location.search () tiene muchas partes móviles. Hay muchos ejemplos de código para obtener parámetros de cadenas de consulta.
nuander
@TheSharpieOne, si tienes un momento, ¿podrías echar un vistazo a esta pregunta? stackoverflow.com/questions/43121888/…
Leon Gaban
48

Si solo necesita ver la cadena de consulta como texto, puede usar: $window.location.search

andersh
fuente
11
¿Cómo no es esto una respuesta? Tal vez es un poco corto, pero no parecen responder a la pregunta.
Léo Lam
Si verifica las marcas de tiempo, la respuesta se editó 2 horas después del comentario de Dan. Realmente no es tan importante, pero me pareció impactante que el comentario de Leo estuviera siendo votado, así que pensé en señalarlo.
Bill Tarbell
39

$location.search()devuelve un objeto, que consta de las claves como variables y los valores como su valor. Entonces: si escribe su cadena de consulta así:

?user=test_user_bLzgB

Fácilmente podría obtener el texto así:

$location.search().user

Si no desea usar una clave, valor como? Foo = bar, sugiero usar un hash #test_user_bLzgB,

y llamando 

$location.hash()

devolvería 'test_user_bLzgB', que son los datos que desea recuperar.

Información adicional:

Si usó el método de cadena de consulta y obtiene un objeto vacío con $ location.search (), probablemente sea porque Angular está usando la estrategia hashbang en lugar de la html5 ... Para que funcione, agregue esta configuración a su módulo 

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

Primero, haga que el formato de URL sea correcto para obtener la cadena de consulta use #? Q = string que funcione para mí

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

Inyectar $ location service en el controlador

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Entonces la salida debe ser abcd

MasoodUrRehman
fuente
10

también puedes usar esto

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
fuente
3
Ha copiado esa función de otra respuesta SOF ... es mejor hacer referencia a su fuente.
arcseldon
Sí, esto es lo que uso, lo obtuve en algún lugar de SO
nuander
10

Si $location.search()no funciona, asegúrese de tener lo siguiente:

1) html5Mode(true)está configurado en la configuración del módulo de la aplicación

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

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

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

Referencias:

  1. base href = "/"
  2. html5Mode
Mahesh
fuente
"html5Mode (true) está configurado en la configuración del módulo de la aplicación" - explique
15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett: lo siento, quise decir que está configurado en el método de configuración de un objeto de aplicación angular. Por ejemplo, aquí está: var appModule = angular.module ('myAppModule', []);
Mahesh
Gracias, soy bastante nuevo en Angular
15ee8f99-57ff-4f92-890c-b56153
Sí, eso es tan importante, enfrenté el mismo problema
Bahadir Tasdemir
7

Angular no admite este tipo de cadena de consulta.

Se supone que la parte de consulta de la URL es una &secuencia separada de pares clave-valor, por lo que se puede interpretar perfectamente como un objeto.

No hay ninguna API para administrar cadenas de consulta que no representan conjuntos de pares clave-valor.

reescrito
fuente
0

En mi ejemplo de NodeJS, tengo una URL "localhost: 8080 / Lists / list1.html? X1 = y" que quiero atravesar y adquirir valores.

Para trabajar con $ location.search () para obtener x1 = y, he hecho algunas cosas

  1. fuente de script a angular-route.js
  2. Inyecte 'ngRoute' en las dependencias del módulo de su aplicación
  3. Configura tu proveedor de ubicación
  4. Agregue la etiqueta base para $ location (si no lo hace, su búsqueda (). X1 no devolverá nada o indefinido. O si la etiqueta base tiene la información incorrecta, su navegador no podrá encontrar sus archivos dentro del script src que sus necesidades .html. ¡Siempre abra la fuente de visualización de la página para probar las ubicaciones de sus archivos!)
  5. invocar el servicio de ubicación (buscar ())

mi list1.js tiene

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

y mi list1.html tiene

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

Guía: https://code.angularjs.org/1.2.23/docs/guide/$location

Hoja de Jenna
fuente
0

Mi solución es más simple, crear una fábrica e implementarla como una variable. Por ejemplo

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 fragmento

Ivan Fretes
fuente