Abrufen von Werten aus Abfragezeichenfolgen in einer URL mithilfe von AngularJS $ location

95

In Bezug auf $ location.search heißt es in den Dokumenten :

Gibt den Suchteil (als Objekt) der aktuellen URL zurück, wenn er ohne Parameter aufgerufen wird.

In meiner URL hat meine Abfragezeichenfolge einen Parameter '? Test_user_bLzgB' ohne Wert. Auch '$ location.search ()' gibt ein Objekt zurück. Wie bekomme ich den eigentlichen Text?

javascript angularjs

— Ian Warburton
quelle

Welches Objekt bekommst du? Haben Sie einen Plunkr oder eine Geige, die das Problem demonstriert, mit dem Sie konfrontiert sind? Sie sind korrekt, wenn Sie verwenden, $location.search()aber ich möchte das "Objekt" überprüfen, das Sie erhalten, wenn Sie es aufrufen ...

— callmekatootie

Ich weiß nicht, um welches Objekt es sich handelt. Ich habe versucht, die Eigenschaften aufzulisten, aber es scheint keine zu geben.

— Ian Warburton

Ich bin mir nicht sicher, wie ich eine Geige machen soll, die eine Abfragezeichenfolge untersucht.

— Ian Warburton

151

Ich bin nicht sicher, ob es sich geändert hat, seit die akzeptierte Antwort akzeptiert wurde, aber es ist möglich.

$location.search()gibt ein Objekt mit Schlüssel-Wert-Paaren zurück, dieselben Paare wie die Abfragezeichenfolge. Ein Schlüssel, der keinen Wert hat, wird nur als wahr im Objekt gespeichert. In diesem Fall wäre das Objekt:

{"test_user_bLzgB": true}

Sie können direkt mit auf diesen Wert zugreifen $location.search().test_user_bLzgB

Beispiel (mit größerer Abfragezeichenfolge): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Hinweis: Aufgrund von Hashes (wie unter http://fiddle.jshell.net/#/url , wodurch eine neue Geige erstellt wird) funktioniert diese Geige nicht in Browsern, die den Verlauf von js nicht unterstützen (funktioniert nicht) im IE <10)

Bearbeiten:
Wie in den Kommentaren von @Naresh und @DavidTchepak ausgeführt, $locationProvidermuss auch das ordnungsgemäß konfiguriert werden: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

— TheSharpieOne
quelle

3

Wie Naresh erwähnt hat, muss $locationProviderauch richtig konfiguriert werden: code.angularjs.org/1.2.23/docs/guide/… (Dies hat mich gestolpert. Hoffentlich spart der Link anderen etwas Zeit.)

— David Tchepak

2

Zum Konfigurieren des Standortanbieters benötigen Sie: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Sie benötigen außerdem ein Basis-Tag in der HTML-Datei: <base href = "/">

— Amin Ariana

Vielen Dank für die Inspriation und nützliche Tipps, teilen Sie einfach meinen Fall. Ich erstelle eine Konstante namens userConfig und füge alles ein. Einige Einstellungen können aus Gründen der Benutzerflexibilität durch eine Abfragezeichenfolge überschrieben werden. Ich verwende dies und füge die Abfrage in eine globalController-Bereichsvariable ein, die sich im HTML-Tag befindet, damit jeder untergeordnete Controller den Parameter einschließlich service übernehmen kann. Weil die userConfig auch in den Service gestellt wird. So virtuell können sie miteinander interagieren.

— Simongcc

Ich fand es einfacher, nur eine js-Funktion zu verwenden, $ location.search () hat zu viele bewegliche Teile. Es gibt viele Codebeispiele zum Abrufen von Abfragezeichenfolgenparametern.

— Nuander

@TheSharpieOne Wenn Sie einen Moment Zeit haben, können Sie sich diese Frage ansehen? stackoverflow.com/questions/43121888/…

— Leon Gaban

48

Wenn Sie nur die Abfragezeichenfolge als Text betrachten müssen, können Sie Folgendes verwenden: $window.location.search

— andersh
quelle

11

Wie ist das keine Antwort? Vielleicht ist es ein wenig zu kurz, aber es ist scheint die Frage zu beantworten.

— Léo Lam

Wenn Sie die Zeitstempel überprüfen, wurde die Antwort 2 Stunden nach Dans Kommentar bearbeitet. Es ist wirklich nicht so wichtig, aber ich fand es schockierend, dass Leos Kommentar positiv bewertet wurde, also dachte ich, ich würde darauf hinweisen.

— Bill Tarbell

39

$location.search()Gibt ein Objekt zurück, das aus den Schlüsseln als Variablen und den Werten als Wert besteht. Also: Wenn Sie Ihre Abfragezeichenfolge wie folgt schreiben:

?user=test_user_bLzgB

Sie könnten den Text leicht so bekommen:

$location.search().user

Wenn Sie keinen Schlüssel mit dem Wert? Foo = bar verwenden möchten, empfehle ich die Verwendung eines Hashs #test_user_bLzgB,

und anrufen

$location.hash()

würde 'test_user_bLzgB' zurückgeben, das sind die Daten, die Sie abrufen möchten.

Zusätzliche Information:

Wenn Sie die Abfragezeichenfolgenmethode verwendet haben und ein leeres Objekt mit $ location.search () erhalten, liegt dies wahrscheinlich daran, dass Angular die Hashbang-Strategie anstelle der HTML5-Strategie verwendet. Fügen Sie diese Konfiguration zu Ihrer hinzu, damit sie funktioniert Modul

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

— Alejandrociatti
quelle

13

Stellen Sie zuerst das URL-Format korrekt ein, um die Abfragezeichenfolge abzurufen. Verwenden Sie #? Q = Zeichenfolge , die für mich funktioniert

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

Injizieren Sie $ location service in den Controller

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Die Ausgabe sollte also abcd sein

— MasoodUrRehman
quelle

10

Sie können dies auch verwenden

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
quelle

3

Sie haben diese Funktion aus einer anderen SOF-Antwort kopiert ... am besten, um auf Ihre Quelle zu verweisen.

— Arcseldon

Ja, das ist was ich benutze, habe es irgendwo auf SO bekommen

— nuander

10

Wenn Ihr $location.search()nicht funktioniert, stellen Sie sicher, dass Sie Folgendes haben:

1) html5Mode(true)wird in der Modulkonfiguration der App konfiguriert

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

2) <base href="https://stackoverflow.com/">ist in Ihrem HTML vorhanden

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

Verweise:

— Mahesh
quelle

"html5Mode (true) ist in der Modulkonfiguration der App konfiguriert"

— EXPLAIN

@EdPlunkett - Entschuldigung, ich wollte damit sagen, dass es in der Konfigurationsmethode eines eckigen App-Objekts konfiguriert ist. ZB hier ist es: var appModule = angle.module ('myAppModule', []);

— Mahesh

Danke, ich bin ziemlich neu in Angular

— 15ee8f99-57ff-4f92-890c-b56153

Ja, das ist so wichtig, stand vor dem gleichen Problem

— Bahadir Tasdemir

7

Angular unterstützt diese Art von Abfragezeichenfolge nicht.

Der Abfrageteil der URL soll eine &getrennte Folge von Schlüssel-Wert-Paaren sein und somit perfekt als Objekt interpretierbar sein.

Es gibt überhaupt keine API zum Verwalten von Abfragezeichenfolgen, die keine Sätze von Schlüssel-Wert-Paaren darstellen.

— umgeschrieben
quelle

0

In meinem NodeJS-Beispiel habe ich eine URL "localhost: 8080 / Lists / list1.html? X1 = y", die ich durchlaufen und Werte erfassen möchte.

Um mit $ location.search () zu arbeiten, um x1 = y zu erhalten, habe ich einige Dinge getan

Skriptquelle zu angle-route.js
Fügen Sie 'ngRoute' in die Abhängigkeiten Ihres App-Moduls ein
Konfigurieren Sie Ihren locationProvider
Fügen Sie das Basis-Tag für $ location hinzu (wenn Sie dies nicht tun, würde Ihre Suche (). X1 nichts oder undefiniert zurückgeben. Wenn das Basis-Tag die falschen Informationen enthält, kann Ihr Browser Ihre Dateien in script src nicht finden Ihre .html-Anforderungen. Öffnen Sie immer die Ansichtsquelle der Seite, um Ihre Dateispeicherorte zu testen!)
Rufen Sie den Ortungsdienst auf (search ())

meine list1.js hat

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

und meine list1.html hat

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

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

— Jenna Leaf
quelle

0

Mein Fix ist einfacher, erstelle eine Factory und implementiere als eine Variable. Beispielsweise

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>

Erweitern Sie das Snippet

— Ivan Fretes
quelle