Was ist der prägnanteste Weg, um Abfrageparameter in AngularJS zu lesen?

Question

Mehr

Quelle Nicht AMP-Version Bearbeiten

Was ist der prägnanteste Weg, um Abfrageparameter in AngularJS zu lesen?

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?

Damjan Pavlica

Bearbeitete Frage 28. Juli 2015 в 4:20

Programmierung

angularjs ngroute

16. Juni 2012 в 1:03

15 Aufrufe

Andrew Joslin · Answer 1 · 2012-06-16T14:57:17+00:00

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.

pkozlowski.opensource · Answer 2 · 2012-07-16T17:56:48+00:00

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.

Für die Referenz, hier ist die Arbeit jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

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

    target=Pawel

</div>

Ellis Whitehead · Answer 3 · 2012-06-17T06:37:15+00:00

Um eine teilweise Antwort auf meine eigene Frage zu geben, hier ein funktionierendes Beispiel für HTML5-Browser:




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



Target: {{target}}<br/>

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