Wie setze ich $ stateParams mithilfe von URL-Parametern mit uiRouter in Plunker?

Question

Ich versuche etwas zu demonstrieren mit Hilfe von Url-Abfrage-Parameter mit Plunker, aber ich kann nicht einmal die Parameter zu zeigen (und dann nicht zeigen, meine ursprüngliche Problem).

Ich habe eine einfache Plunker geschaffen, in dem die Zustände url Eigenschaft wie folgt aussieht: url: '/root?firstParam' Was soll ich dann füllen ist $stateParams.firstParam mit dem, was ich in der URL des Browsers schreibe für diese queryParameter. Plunker, plunkerWithParameter?firstParam=foo

Ich könnte mir vorstellen, dass $stateParams.firstParam würde für die erste URL nicht definiert werden, aber für die zweite auf „foo“ gesetzt. Aber es ist in beiden Fällen nicht definiert.

Wie kann ich die $stateParams.firstParam gesetzt werden?

Answer 1

Edit: Es scheint, dass es tatsächlich möglich ist (@Rogerio Soares Antwort beweist dies). Ich behalte meine Antwort hier, weil es einen anderen Fehler im Code gab.

Es gibt keine Möglichkeit, die Parameter aus der Suchleiste des Browsers in einer Plnrk-App abzurufen, da sie in einem iFrame ausgeführt wird. Ich reparierte ein weiteres Problem von Ihnen unter:

ich den Parameter auf Ihre otherwise Anweisung wie folgt hinzugefügt:

$urlRouterProvider.otherwise('/root?firstParam=test'); 

Das Problem ist, dass Sie root weitergeleitet, wenn keine andere Route gefunden wurde, und du hast es nicht Geben Sie beliebige Parameter für die Route an.

Aktualisiert PlunkR: https://plnkr.co/edit/OxEGVkhzBO332ym3q8fV?p=preview

Answer 2

das Problem ist, dass die plnkr innerhalb iFrames ausgeführt wird, so dass die URL Sie einfach falsch versucht ist.

Versuchen Sie diese: https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

Ich habe einen Link zu Ihrem Root-Zustand mit dem ersten Parameter auf 'Ja' wie folgt ergänzt:

<a ui-sref="root({firstParam: 'YEAH'})">Go to Root with Firstparam = "YEAH"</a> 

, das zu dieser URL Ergebnisse: https://run.plnkr.co/roo/root?firstParam=YEAH .

Wrong: Wenn Sie diese URL öffnen direkt im Browser wird der Abfrage-params richtig an die AngularJS Anwendung übergeben und auf $stateParams.firstParam

Correct: Ich habe nicht einen Weg gefunden habe eine permanente URL zu dem PLNKR, ohne dass der Code in einen Iframe eingebettet ist.

Answer 3

meine zwei Cent: Wie @Johannes Ferner sagte Plunker iframe verwenden, aber Sie Ihre URL zumindest bekommen kann mit document.referrer Es ist ein wenig hacky, aber es funktioniert: D

$scope.parameters = []; 
    var url = document.referrer; 
    var props = url.split("?")[1] 
    .split("&") 
    .map(function(o){ 
    return o.split("="); 
    }); 
    console.log(props); 
    for(var i = 0; i < props.length; i++){ 
    var prop = props[i]; 
    console.log(prop); 
    if($stateParams.hasOwnProperty(prop[0])){ 
     $scope.parameters.push({name: prop[0], value:prop[1]}); 
    } 
    } 

https://plnkr.co/edit/Cejgj1cLJnwQT2LzjsRm?firstParam=foo&p=preview