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

Question 1

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?

Question 2

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

Question 3

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

Question 4

$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);    
}]);

Question 5

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

Question 6

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');

Question 7

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:

Question 8

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ść.

Question 9

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

źródło skryptu do angular-route.js
Wstaw „ngRoute” do zależności modułu aplikacji
Skonfiguruj dostawcę lokalizacji
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!)
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

Question 10

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