如何在 Plunker 中使用 uiRouter 使用 url 参数设置 $stateParams？答案

【问题标题】：How do I set $stateParams by using url parameters using uiRouter in Plunker?如何在 Plunker 中使用 uiRouter 使用 url 参数设置 $stateParams？
【发布时间】：2016-05-04 02:05:31
【问题描述】：

我正在尝试使用 plunker 使用 url-query 参数演示某些内容，但我什至无法显示参数（因此无法演示我的原始问题）。

我创建了一个简单的 plunker，其中 states url 属性如下所示：url: '/root?firstParam' 然后我想要的是用我在浏览器的 url 中为该 queryParameter 编写的任何内容填充$stateParams.firstParam。 Plunker, plunkerWithParameter?firstParam=foo

我想$stateParams.firstParam 对于第一个 url 是未定义的，但第二个设置为“foo”。但在这两种情况下都是未定义的。

如何设置$stateParams.firstParam？

【问题讨论】：

标签： angularjs angular-ui-router plunker

【解决方案1】：

编辑：似乎实际上是可能的（@Rogerio Soares 的回答证明了这一点）。在这里保留我的答案，因为代码中还有其他错误。

由于 Plnkr 应用程序在 iFrame 中运行，因此无法从浏览器搜索栏中获取参数。我在下面解决了您的另一个问题：

我将参数添加到您的otherwise 语句中，如下所示：

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

问题是你在没有找到其他路由时重定向到root，并且你没有为路由指定任何参数。

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

【讨论】：

该死的，只是在输入那个答案：D 17 天有 50 个代表：p，你比我少了几分钟！
至少朝着我想要的方向迈出了一步。但是有没有办法在浏览器的地址栏中实际有参数呢？
不在 Plunkr 示例中，我所知道的地址栏中的路由映射到 plunkr 网站路由。但在未封装在另一个网站中的实际应用程序中，它可以工作。
或者我的意思是从实际 url 中获取 url 参数以设置为 plunker 中的演示应用程序。我想我想要的是两种方式。但这似乎不可能？
不，我认为 PlunkR 不会将查询传递给实际的 Plunk。也许还有其他类似的工具可以做到这一点。这是另一个关于 jsfiddle 的问题，似乎有答案：stackoverflow.com/questions/16527958/…

【解决方案2】：

我的两分钱：正如@Johannes Ferner 所说，Plunker 使用 iframe，但您至少可以使用document.referrer 获取您的网址这有点hacky，但它可以工作：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

【讨论】：

这确实有点hacky！在某种程度上它确实完成了工作，但我希望它能够在角度生命周期内工作。从答案和 cmets 我认为这个问题的答案是否定的。但是您确实会因为实际从参数中获取值而获得支持。

【解决方案3】：

问题是 plnkr 在 iFrames 中运行，因此您尝试的 URL 完全错误。

试试这个： https://plnkr.co/edit/jV2pdV6q8g8QZ132Qu3A

我添加了一个指向您的根状态的链接，第一个参数设置为“是”，如下所示：

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

哪个结果指向此 URL：https://run.plnkr.co/roo/root?firstParam=YEAH。

错误：如果您直接在浏览器中打开此 URL，则查询参数会正确传递给您的 AngularJS 应用程序并设置为 $stateParams.firstParam

正确：我没有找到一种方法来获得 plnkr 的永久 URL，而无需将代码嵌入 iframe。

【讨论】：