I' d möchte die Werte der URL-Abfrageparameter mit AngularJS zu lesen. I'm Zugriff auf die HTML mit der folgenden URL:
http://127.0.0.1:8080/test.html?target=bob
Wie erwartet, ist location.search
"?target=bob"
.
Für den Zugriff auf den Wert von target habe ich verschiedene Beispiele im Web gefunden, aber keines davon funktioniert in AngularJS 1.0.0rc10. Insbesondere die folgenden sind alle undefined
:
$location.search.target
$location.search['target']
$location.search()['target']
Weiß jemand, was funktionieren wird? (Ich verwende $location
als Parameter für meinen Controller)
Aktualisieren:
Ich habe unten eine Lösung gepostet, aber ich bin nicht ganz zufrieden damit.
In der Dokumentation unter Developer Guide: Angular Services: Using $location steht folgendes über $location
:
Wann sollte ich $location verwenden?
Immer wenn Ihre Anwendung auf eine Änderung der aktuellen URL reagieren muss oder wenn Sie die aktuelle URL im Browser ändern wollen.
In meinem Szenario wird meine Seite von einer externen Webseite mit einem Abfrageparameter geöffnet, ich reagiere also nicht auf eine Änderung der aktuellen URL per se. Vielleicht ist also $location
nicht das richtige Werkzeug für diese Aufgabe (für die hässlichen Details, siehe meine Antwort unten). Ich habe daher den Titel dieser Frage von "Wie lese ich Abfrageparameter in AngularJS mit $location?" zu "Was ist der prägnanteste Weg, um Abfrageparameter in AngularJS zu lesen?" geändert. Offensichtlich könnte ich nur Javascript und regulären Ausdruck verwenden, um "location.search" zu parsen, aber gehen, dass Low-Level für etwas so grundlegend wirklich beleidigt meine Programmierer Sensibilitäten.
Also: gibt es einen besseren Weg, um $location
als ich in meiner Antwort zu verwenden, oder gibt es eine prägnante Alternative?
Sie können $routeParams (erfordert ngRoute) in Ihren Controller einfügen. Hier ist ein Beispiel aus den Dokumenten:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
EDIT: Sie können auch Abfrageparameter mit dem $location Service (verfügbar in ng
) abrufen und setzen, insbesondere dessen search
Methode: $location.search().
$routeParams sind nach dem ersten Laden des Controllers weniger nützlich; $location.search()
kann jederzeit aufgerufen werden.
Gut, dass Sie es geschafft haben, es mit dem html5-Modus zum Laufen zu bringen, aber es ist auch möglich, es im Hashbang-Modus zum Laufen zu bringen.
Sie könnten einfach verwenden:
$location.search().target
verwenden, um Zugriff auf den Suchparameter 'target' zu erhalten.
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);
$scope.changeTarget = function(name) {
$location.search('target', name);
}
}
<div ng-controller="MyCtrl">
<a href="#!/test/?target=Bob">Bob</a>
<a href="#!/test/?target=Paul">Paul</a>
<hr/>
URL 'target' param getter: {{target}}<br>
Full url: {{location.absUrl()}}
<hr/>
<button ng-click="changeTarget('Pawel')">target=Pawel</button>
</div>
Um eine teilweise Antwort auf meine eigene Frage zu geben, hier ein funktionierendes Beispiel für HTML5-Browser:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
Der Schlüssel war der Aufruf von $locationProvider.html5Mode(true);
wie oben beschrieben. Es funktioniert jetzt beim Öffnen von http://127.0.0.1:8080/test.html?target=bob
. Ich bin nicht glücklich über die Tatsache, dass es in älteren Browsern nicht funktioniert, aber ich könnte diesen Ansatz trotzdem verwenden.
Eine Alternative, die mit älteren Browsern funktionieren würde, wäre, den Aufruf von html5mode(true)
wegzulassen und stattdessen die folgende Adresse mit Raute+Schrägstrich zu verwenden:
http://127.0.0.1:8080/test.html#/?target=bob
Die entsprechende Dokumentation findet sich unter Developer Guide: Angular Services: Using $location (seltsam, dass meine Google-Suche das nicht gefunden hat...).