9

I'm trying to demonstrate something using url-query parameters using plunker, but I can't even get the parameters to show up (and then consequently not demonstrate my original issue).

I have created a simple plunker where the states url property looks like this: url: '/root?firstParam' What I want then is to populate $stateParams.firstParam with whatever I write in the url of the browser for that queryParameter. Plunker, plunkerWithParameter?firstParam=foo

I would imagine that $stateParams.firstParam would be undefined for the first url, but set to "foo" for the second. But it's undefined in both cases.

How can I get the $stateParams.firstParam to be set?

Gustav
  • 3,408
  • 4
  • 24
  • 41

3 Answers3

7

Edit: It seems that it is actually possible (@Rogerio Soares answer proves this). Keeping my answer here because there was an other error in the code.

There is no way to get the parameters from the browsers search bar in a Plnkr app since it is running in an iFrame. I fixed another problem of yours below:

I added the parameter to your otherwise statement like this:

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

The problem is that you redirected to root when no other route was found, and you didn't specify any parameters to the route.

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

henrikmerlander
  • 1,554
  • 13
  • 20
  • Damn, was just typing that answer :D there goes 50 rep :p 17 days, and you beat me by a few minutes! – Kenneth Van den Berghe Mar 18 '16 at 12:14
  • 1
    at least one step toward what I want. But is there a way to actually have the parameters in the address bar of the browser? – Gustav Mar 18 '16 at 13:44
  • 1
    Not in the Plunkr example what i know as routes in the address bar there maps to plunkr website routes. But in a real application that is not wrapped inside another website it will work. – henrikmerlander Mar 18 '16 at 13:45
  • So it is not possible to get url parameters to actually be shown in the url when demonstrating something in plunker? Like what I'm trying to do with the second link in the question – Gustav Mar 18 '16 at 15:05
  • 1
    Or I mean getting url parameters from the actual url to be set to the demo app inside plunker. I guess what I would like is both ways. But it doesn't seem to be possible? – Gustav Mar 18 '16 at 15:06
  • 1
    No, I don't think PlunkR passes down the query to the actual Plunk. Maybe there is some other similar tool that can do it. Here is another question regarding jsfiddle which seems to have an answer: http://stackoverflow.com/questions/16527958/how-to-pass-get-parameters-to-jsfiddle – henrikmerlander Mar 22 '16 at 06:34
  • @henrikmerlander i don't think that this is exactly the answer to the question. As far as i understand it, the example of the OP was correct - but he was not using the correct URLs to pass in the query-parameter to the AngularJS app within plnkr. – Johannes Ferner Mar 23 '16 at 14:37
  • @JohannesFerner The problem is that it is not possible (afaik) to pass URL parameters to the actual app in plnkr by using the browsers URL field. – henrikmerlander Mar 23 '16 at 16:03
  • @henrikmerlander correct, i thought that it worked by using the generated URL in my plnkr below. But as stated in the corrected answer it seems that there is no way to do this – Johannes Ferner Mar 24 '16 at 08:32
  • @henrikmerlander I feel from the comments it seems the correct answer would be no, like you stated in your comment. Atleast no way to automatically get it into $stateParams. If you could add an edit saying something like that I feel I could accept your answer – Gustav Mar 28 '16 at 09:50
3

my two cents : As @Johannes Ferner said Plunker use iframe, but you can at least get your url with document.referrer It is a little hacky but it work :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

Rogerio Soares
  • 1,613
  • 16
  • 14
  • That was indeed a bit hacky! In one way it does get the job done, but I was hoping for it to work inside the angular life cycle so to speak. From the answers and comments I think the answer to the question is no. But you do get an upvote for actually getting the values from the parameters. – Gustav Mar 28 '16 at 09:47
0

the Problem is that the plnkr is running within iFrames, so the URL you tried is simply wrong.

Try this one: https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

I have added a Link to your root state with the first-parameter set to 'Yeah' like this: 

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

Which results to this URL: https://run.plnkr.co/roo/root?firstParam=YEAH.

Wrong: If you open this URL directly in the browser, the query-params are correctly passed to your AngularJS Application and set to $stateParams.firstParam

Correct: I did not found a way to have a permanent URL to the plnkr without the code being embedded in an iframe.

Johannes Ferner
  • 718
  • 7
  • 15