Pobieranie wartości z ciągu zapytania w adresie URL przy użyciu lokalizacji AngularJS $

95

Jeśli chodzi o $ location.search, w dokumentach jest napisane :

Zwróć część wyszukiwania (jako obiekt) bieżącego adresu URL po wywołaniu bez żadnego parametru.

W moim adresie URL mój ciąg zapytania ma parametr „? Test_user_bLzgB” bez wartości. Również '$ location.search ()' zwraca obiekt. Jak uzyskać rzeczywisty tekst?

javascript angularjs Ian Warburton
źródło
Jaki przedmiot otrzymujesz? Czy masz plunkr lub skrzypce, które pokazują problem, z którym się borykasz? Masz rację, kiedy używasz, $location.search()ale chcę sprawdzić "obiekt", który otrzymujesz, gdy go nazywasz ...
callmekatootie
Nie wiem, co to za przedmiot. Próbowałem wyliczyć właściwości, ale wygląda na to, że nie ma.
Ian Warburton
Nie wiem, jak zrobić skrzypce, które sprawdzają ciąg zapytania.
Ian Warburton

Odpowiedzi:

151

Nie jestem pewien, czy zmieniło się od czasu zaakceptowania zaakceptowanej odpowiedzi, ale jest to możliwe.

$location.search()zwróci obiekt składający się z par klucz-wartość, takich samych jak łańcuch zapytania. Klucz, który nie ma wartości, jest po prostu przechowywany w obiekcie jako prawdziwy. W tym przypadku obiektem będzie:

{"test_user_bLzgB": true}

Dostęp do tej wartości można uzyskać bezpośrednio za pomocą $location.search().test_user_bLzgB

Przykład (z większym ciągiem zapytania): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Uwaga: ze względu na skróty (ponieważ przejdzie do http://fiddle.jshell.net/#/url , co spowoduje utworzenie nowych skrzypiec), to skrzypce nie będą działać w przeglądarkach, które nie obsługują historii js (nie będą działać w IE <10)

Edycja:
jak wskazali w komentarzach @Naresh i @DavidTchepak, $locationProviderrównież należy poprawnie skonfigurować: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

TheSharpieOne
źródło
3
Jak wspomniał Naresh, $locationProviderrównież musi być poprawnie skonfigurowane: code.angularjs.org/1.2.23/docs/guide/… (To mnie zaskoczyło . Mam nadzieję, że link zaoszczędzi trochę czasu.)
David Tchepak
2
Aby skonfigurować dostawcę lokalizacji, potrzebujesz: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Potrzebujesz również tagu podstawowego w pliku HTML: <base href = "/">
Amin Ariana
Dzięki za wstawienie i przydatne wskazówki, po prostu udostępnij moją sprawę. Tworzę stałą o nazwie userConfig i umieszczam wszystko w środku, niektóre ustawienia można zastąpić ciągiem zapytania, aby zapewnić elastyczność użytkownika. Używam tego i umieszczam zapytanie w zmiennej zasięgu globalController, która jest w tagu HTML, więc każdy kontroler podrzędny może przyjąć parametr, w tym usługę. Ponieważ userConfig jest również umieszczany w Service. Więc wirtualnie mogą ze sobą współdziałać.
simongcc
Okazało się, że łatwiej jest po prostu użyć funkcji js, $ location.search () ma wiele ruchomych części. Istnieje wiele przykładów kodu służących do pobierania parametrów ciągu zapytania.
nuander
@TheSharpieOne, jeśli masz chwilę, czy możesz rzucić okiem na to pytanie? stackoverflow.com/questions/43121888/…
Leon Gaban
48

Jeśli chcesz spojrzeć na ciąg zapytania jako tekst, możesz użyć: $window.location.search

andersh
źródło
11
Dlaczego to nie jest odpowiedź? Może to jest trochę krótki, ale nie wydaje się, aby odpowiedzieć na to pytanie.
Léo Lam
Jeśli zaznaczysz znaczniki czasu, odpowiedź została zmieniona 2 godziny po komentarzu Dana. To naprawdę nie jest takie ważne, ale uznałem za szokujące, że komentarz Leo zyskał uznanie, więc pomyślałem, że zwrócę na to uwagę.
Bill Tarbell,
39

$location.search()zwraca obiekt, składający się z kluczy jako zmiennych i wartości jako wartości. A więc: jeśli napiszesz ciąg zapytania w ten sposób:

?user=test_user_bLzgB

Możesz łatwo uzyskać taki tekst:

$location.search().user

Jeśli nie chcesz używać klucza, wartości takiej jak? Foo = bar, sugeruję użycie skrótu #test_user_bLzgB,

i dzwonię 

$location.hash()

zwróci „test_user_bLzgB”, czyli dane, które chcesz odzyskać.

Dodatkowe informacje:

Jeśli użyłeś metody zapytania i otrzymujesz pusty obiekt z $ location.search (), to prawdopodobnie dlatego, że Angular używa strategii hashbang zamiast html5 ... Aby to działało, dodaj tę konfigurację do swojego moduł 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
alejandrociatti
źródło
13

Najpierw popraw format adresu URL, aby uzyskać ciąg zapytania, użyj #? Q = ciąg, który działa dla mnie

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

Wprowadź usługę $ location do kontrolera

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Więc wyjście powinno być abcd

MasoodUrRehman
źródło
10

możesz tego również użyć

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
źródło
3
Skopiowałeś tę funkcję z innej odpowiedzi SOF ... najlepiej odwołać się do twojego źródła.
arcseldon
Tak, to jest to, czego używam, mam to skądś SO
nuander
10

Jeśli twój $location.search()nie działa, upewnij się, że masz:

1) html5Mode(true)jest konfigurowany w konfiguracji modułu aplikacji

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

2) <base href="https://stackoverflow.com/">jest obecny w kodzie HTML

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

Bibliografia:

  1. base href = „/”
  2. html5Mode
Mahesh
źródło
„html5Mode (true) jest skonfigurowany w konfiguracji modułu aplikacji” - wyjaśnij
15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Przepraszam, chciałem powiedzieć, że jest skonfigurowany w metodzie konfiguracji kątowego obiektu aplikacji. Np. Tutaj jest: var appModule = angular.module ('myAppModule', []);
Mahesh
Dzięki, jestem całkiem nowy w Angular
15ee8f99-57ff-4f92-890c-b56153
Tak, to takie ważne, stanął przed tym samym problemem
Bahadir Tasdemir
7

Angular nie obsługuje tego rodzaju ciągu zapytania.

Część adresu URL zawierająca zapytanie ma być &oddzieloną sekwencją par klucz-wartość, dzięki czemu można ją doskonale zinterpretować jako obiekt.

W ogóle nie ma interfejsu API do zarządzania ciągami zapytań, które nie reprezentują zestawów par klucz-wartość.

przepisany
źródło
0

W moim przykładzie NodeJS mam adres URL „localhost: 8080 / Lists / list1.html? X1 = y”, przez który chcę przejść i pobrać wartości.

Aby pracować z $ location.search () w celu uzyskania x1 = y, zrobiłem kilka rzeczy

  1. źródło skryptu do angular-route.js
  2. Wstaw „ngRoute” do zależności modułu aplikacji
  3. Skonfiguruj dostawcę lokalizacji
  4. Dodaj znacznik podstawowy dla $ location (jeśli tego nie zrobisz, twoje search (). X1 nie zwróci nic lub undefined. Lub jeśli tag podstawowy zawiera błędne informacje, twoja przeglądarka nie będzie w stanie znaleźć twoich plików wewnątrz skryptu src, który Twoje potrzeby .html. Zawsze otwieraj źródło widoku strony, aby przetestować lokalizacje plików!)
  5. wywołać usługę lokalizacji (search ())

moja lista1.js ma

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

a moja list1.html ma

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

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

Jenna Leaf
źródło
0

Moja poprawka jest prostsza, tworzy fabrykę i implementuje jako jedną zmienną. Na przykład

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>
Rozwiń fragment

Ivan Fretes
źródło