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

Ich möchte die Werte von URL-Abfrageparametern mit AngularJS lesen. Ich greife auf den HTML-Code mit der folgenden URL zu:

http://127.0.0.1:8080/test.html?target=bob

Wie erwartet ist location.search "?target=bob" . Um auf den Wert von target zuzugreifen, habe ich verschiedene im Web aufgelistete Beispiele gefunden, von denen jedoch keines in AngularJS 1.0.0rc10 funktioniert. Insbesondere sind die folgenden nicht undefined :

  • $location.search.target
  • $location.search['target']
  • $location.search()['target']

Wer weiß, was funktioniert? (Ich verwende $location als Parameter für meinen Controller)


Aktualisieren:

Ich habe unten eine Lösung gepostet, bin aber nicht ganz zufrieden damit. Die Dokumentation im Entwicklerhandbuch: Angular Services: Using $ location gibt Folgendes über $location :

Wann sollte ich $ location verwenden?

Jedes Mal, wenn Ihre Anwendung auf eine Änderung der aktuellen URL reagieren muss oder wenn Sie die aktuelle URL im Browser ändern möchten.

Für mein Szenario wird meine Seite von einer externen Webseite mit einem Abfrageparameter geöffnet, so dass ich nicht “auf eine Änderung der aktuellen URL reagiere”. Vielleicht ist $location nicht das richtige Werkzeug für den Job (für die hässlichen Details, siehe meine Antwort unten). Ich habe deshalb den Titel dieser Frage von “Wie lese ich Abfrageparameter in AngularJS mit $ location?” zu “Was ist die prägnanteste Möglichkeit, Abfrageparameter in AngularJS zu lesen?”. Offensichtlich konnte ich nur javascript und regulären Ausdruck benutzen, um location.search zu analysieren, aber dieses niedrige Niveau für etwas so grundlegendes zu gehen verletzt wirklich meine Programmierersensibilität.

Also: Gibt es eine bessere Möglichkeit, $location als in meiner Antwort, oder gibt es eine knappe Alternative?

    Sie können $ routeParams (erfordert ngRoute ) in Ihren Controller injizieren. Hier ist ein Beispiel aus der Dokumentation:

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

    BEARBEITEN: Sie können Abfrageparameter auch mit dem $ location- Dienst (verfügbar in ng ) abrufen und festlegen, insbesondere mit der search $ location.search () .

    $ routeParams sind nach dem anfänglichen Laden des Controllers weniger nützlich. $location.search() kann jederzeit aufgerufen werden.

    Gut, dass Sie es mit dem HTML5-Modus geschafft haben, aber es ist auch möglich, dass es im Hashbang-Modus funktioniert.

    Sie könnten einfach verwenden:

     $location.search().target 

    Zugriff auf den ‘Ziel’ Suchparameter erhalten.

    Für den Hinweis, 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); } } 
     
    Bob Paul
    URL 'target' param getter: {{target}}
    Full url: {{location.absUrl()}}

    Um meine Frage teilweise zu beantworten, hier ein funktionierendes Beispiel für HTML5-Browser:

     < !DOCTYPE html>       Target: {{target}}

    Der Schlüssel war, $locationProvider.html5Mode(true); aufzurufen $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 funktioniert, wäre, den html5mode(true) und stattdessen die folgende Adresse mit Hash + Schrägstrich zu verwenden:

    http://127.0.0.1:8080/test.html#/?target=bob

    Die entsprechende Dokumentation finden Sie im Entwicklerhandbuch: Angular Services: Verwenden von $ location (seltsam, dass meine Google-Suche das nicht gefunden hat …).

    Es kann auf zwei Arten erfolgen:

    1. Verwenden von $routeParams

    Die beste und empfohlene Lösung ist die Verwendung von $routeParams in Ihrem Controller. Erfordert die ngRoute des ngRoute Moduls.

      function MyController($scope, $routeParams) { // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'} var search = $routeParams.search; } 
    1. Verwenden von $location.search() .

    Hier gibt es einen Vorbehalt. Es funktioniert nur mit HTML5-Modus. Standardmäßig funktioniert es nicht für die URL, die keinen Hash ( # ) enthält http://localhost/test?param1=abc&param2=def

    Sie können es einrichten, indem Sie #/ in der URL hinzufügen. http://localhost/test#/?param1=abc&param2=def

    $location.search() um ein Objekt wie:

     { param1: 'abc', param2: 'def' } 

    $ location.search () funktioniert nur, wenn der HTML5-Modus aktiviert ist und nur der Browser unterstützt wird.

    Dies wird immer funktionieren:

    $ window.location.search

    Nur um Sommer zu machen.

    Wenn Ihre App von externen Links geladen wird, erkennt angle dies nicht als URL-Änderung, daher würde $ loaction.search () Ihnen ein leeres Objekt geben. Um dies zu beheben, müssen Sie in Ihrer App config (app.js) Folgendes festlegen:

     .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); 

    Nur eine präzise Antwort auf Ellis Whiteheads Antwort. $locationProvider.html5Mode(true); funktioniert nicht mit der neuen Version von angularjs, ohne die Basis-URL für die Anwendung mit einem -Tag requireBase oder den Parameter requireBase auf false

    Aus dem Dokument :

    Wenn Sie $ location so konfigurieren, dass html5Mode (history.pushState) verwendet wird, müssen Sie die Basis-URL für die Anwendung mit einem Tag angeben oder $ locationProvider so konfigurieren, dass kein Basis-Tag erforderlich ist, indem Sie ein Definitionsobjekt mit requireBase: false an $ locationProvider übergeben. html5Mode ():

     $locationProvider.html5Mode({ enabled: true, requireBase: false }); 

    Sie könnten auch $ location. $$ search.yourparameter verwenden

    das kann dir helfen

    Was ist der prägnanteste Weg zum Lesen von Abfrageparametern in AngularJS?

     // 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'} < !DOCTYPE html>       Target: {{target}}
    ($location.search()).target

    Ich fand, dass HTML5Mode für einen SPA viele 404 Fehlerprobleme verursacht, und es ist nicht notwendig, $ location.search in diesem Fall arbeiten zu lassen. In meinem Fall möchte ich einen URL-Abfragezeichenfolgenparameter erfassen, wenn ein Benutzer zu meiner Site kommt, unabhängig davon, auf welcher “Seite” er anfänglich verlinkt ist UND sie nach dem Einloggen an diese Seite senden können. Ich erfasse also nur alle das Zeug in App.run

     $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) { if (fromState.name === "") { e.preventDefault(); $rootScope.initialPage = toState.name; $rootScope.initialParams = toParams; return; } if ($location.search().hasOwnProperty('role')) { $rootScope.roleParameter = $location.search()['role']; } ... } 

    dann später nach der Anmeldung kann ich sagen $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

    Es ist ein bisschen spät, aber ich denke, Ihr Problem war Ihre URL. Wenn statt

     http://127.0.0.1:8080/test.html?target=bob 

    Sie hatten

     http://127.0.0.1:8080/test.html#/?target=bob 

    Ich bin mir ziemlich sicher, dass es funktioniert hätte. Angular ist sehr wählerisch wegen seiner # /