Come posso impostare $ stateParams usando i parametri url usando uiRouter in Plunker?

Question

Sto provando a dimostrare qualcosa usando i parametri url-query usando plunker, ma non riesco nemmeno a far visualizzare i parametri (e quindi di conseguenza non dimostrare il mio problema originale).

ho creato un semplice plunker dove gli stati proprietà url appare così: url: '/root?firstParam' Quello che voglio quindi è per popolare $stateParams.firstParam con qualunque Scrivo l'url del browser che queryParameter. Plunker, plunkerWithParameter?firstParam=foo

Immagino che $stateParams.firstParam sarebbe undefined per il primo URL, ma impostato su "foo" per il secondo. Ma non è definito in entrambi i casi.

Come è possibile impostare $stateParams.firstParam?

Answer 1

Modifica: Sembra che sia effettivamente possibile (la risposta di @Rogerio Soares lo dimostra). Tenendo la mia risposta qui perché c'era un altro errore nel codice.

Non c'è modo di ottenere i parametri dalla barra di ricerca dei browser in un'app Plnkr poiché è in esecuzione in un iFrame. Ho risolto un altro problema del tuo seguito:

ho aggiunto il parametro alla otherwise dichiarazione come questa:

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

Il problema è che si reindirizzati alla radice quando è stata trovata alcuna altra via, e non l'hai fatto specificare eventuali parametri per il percorso.

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

Answer 2

il problema è che il plnkr è in esecuzione all'interno di iFrame, quindi l'URL si è tentato è semplicemente sbagliato.

Provate questo: https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

Ho aggiunto un link al vostro stato di root con il primo set di parametri di 'Sì' in questo modo:

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

che si traduce a questo URL: https://run.plnkr.co/roo/root?firstParam=YEAH .

sbagliato: Se si apre questo URL direttamente nel browser, la query-params siano correttamente passati al vostro AngularJS Applicazione e impostato su $stateParams.firstParam

Corretto: non ho trovato un modo per avere un URL permanente per plnkr senza che il codice sia incorporato in un iframe.

Answer 3

i miei due centesimi: Come @Johannes Ferner detto Plunker usare iframe, ma si può almeno ottenere il vostro URL con document.referrer E 'un po' hacky, ma funziona: 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