如何通過在Plunker中使用uiRouter使用url參數來設置$ stateParams？

我試圖用plunker演示一些使用url-query參數的東西，但我甚至無法獲取參數來顯示（然後因此不會顯示我的原始問題）。

我創建了一個簡單的plunker在美國url屬性看起來是這樣的：url: '/root?firstParam' 我想接着是填充$stateParams.firstParam與任何我在瀏覽器中爲queryParameter的網址寫。 Plunker，plunkerWithParameter?firstParam=foo

我會想象$stateParams.firstParam將是不確定的第一個網址，但設置爲「富」的第二位。但這兩種情況都沒有定義。

我怎樣才能設置$stateParams.firstParam？

來源

2016-02-29 Gustav

編輯：看來，它實際上是可能的（@Rogerio蘇亞雷斯答案證明了這一點）。保留我的答案，因爲代碼中存在其他錯誤。

由於Plnkr應用程序在iFrame中運行，因此無法從Plnkr應用程序的瀏覽器搜索欄獲取參數。我下面固定你們的另一個問題：

我加入了參數，以此來otherwise聲明是這樣的：

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

的問題是，您重定向到根的時候發現沒有其他的路線，而你沒有爲路線指定任何參數。

更新PlunkR：https://plnkr.co/edit/OxEGVkhzBO332ym3q8fV?p=preview

來源

2016-03-18 11:56:00 henrikmerlander

媽，只是打字答案：D有50個代表：17天，你打了我幾分鐘！ –

至少向我想要的一步。但是有沒有一種方法可以在瀏覽器的地址欄中實際使用參數？ – Gustav

不在Plunkr示例中，我知道地址欄中的路線映射到了PLUNK網站路線。但是在一個不包含在另一個網站內的真正的應用程序中，它將起作用。 – henrikmerlander

的問題是，plnkr是iframe中運行，所以你試過網址是完全錯誤的。

試試這個： https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

我添加了一個鏈接到你的根狀態與第一參數設置爲「是」是這樣的：

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

導致此網址：https://run.plnkr.co/roo/root?firstParam=YEAH 。

錯誤：如果直接在瀏覽器中打開這個網址，查詢-PARAMS正確地傳遞給你的AngularJS應用程序，並設置爲$stateParams.firstParam

正確：我沒有找到一種方法，沒有將代碼嵌入到iframe中的情況下，有一個永久性的URL到plnkr。

來源

2016-03-23 14:07:59

我的兩分錢：作爲@Johannes Ferner說Plunker使用iframe，但你至少可以得到與document.referrer 您的網址這是一個小哈克，但它的工作：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

來源

2016-03-24 23:51:23

這確實有點哈克！從某種意義上說，它確實完成了工作，但我希望它能夠在角度生命週期內發揮作用。從答案和評論我認爲這個問題的答案是否定的。但是您確實可以從參數中獲取值。 – Gustav

如何通過在Plunker中使用uiRouter使用url參數來設置$ stateParams？

回答

相關問題