个人中心
gpt4 book ai didi

javascript - Angular JS : URL parameter appears before the `#!/` and doesn't appear in $location. 搜索()

转载 作者：搜寻专家 更新时间：2023-11-01 05:09:32 26 4
gpt4 key购买 nike

我正在将其他人制作的一个现有的小型 Angular JS 应用程序集成到一个不是使用 Angular 构建的现有网站中。

所有 Angular JS 应用程序文件都保存在一个完全独立的目录中，然后用户可以单击一个链接将它们带到该子目录的索引中。例如:

<a href="/path/to/angular-app/?returnUrl=/original/location">Login.</a>

正如您在上面看到的，我需要传递一个名为 returnUrl 的 URL 参数。然后我需要在 Angular JS 应用程序中获取这个值，使用:

$location.search()

然而，这实际上返回一个空对象。我认为这是因为 Angular JS 在 URL 参数 之后附加了 #!/login，如下所示:

example.com/path/to/app?returnUrl=/original/location/#!/login

如果我在浏览器中修改 URL，将 returnUrl 参数移动到 URL 的末尾并刷新页面，它会起作用并且 $location.search()返回 {returnUrl: "/original/location/"}。但是，据我所知，我无法在我的网站上更改它，因为该参数是 Angular JS 应用程序链接的一部分，并且 #!/login 是随后自动添加的。

我是 AngularJS 新手，所以请尽可能清楚地解释:

  1. 这是怎么回事？为什么 URL 参数在 #!/login 之前？
  2. 为什么这会阻止 $location.search() 返回任何内容？如果我将参数移动到生成的 URL 的末尾，它就会起作用。
  3. 我该怎么做才能解决这个问题？

最佳答案

What is going on here? And why is the URL parameter before the #!/login?

您可以将#! 之前的查询字符串参数视为服务器端 参数，将#! 之后的查询字符串参数视为< em>客户端参数。这是完全有效的:

http://example.com?serverParam=client1#!angularRoute?angularParam=someValue

服务器端参数允许您配置如何从服务器提供页面，然后，在提供服务器页面并加载 Angular 应用程序后，使用客户端 提供特定 Angular 应用程序所期望的参数。

Why does this prevent $location.search() from returning anything? If I move the param to the end of the resulting URL, it works.

因为在您将值移到那里之前，没有为客户端参数指定任何内容。

What can I do to fix this?

  1. 您可以将链接更改为您修改它们以使其正常工作的方式:<a href="example.com/path/to/app/#!/login?returnUrl=/original/location">Login.</a>或复制参数，使其在服务器和客户端上都可用 <a href="example.com/path/to/app/?returnUrl=/original/location#!/login?returnUrl=/original/location">Login.</a>
  2. 你可以注入(inject)$window并从中获取服务器端值 $window.location.search
  3. 你可以注入(inject)$location并使用 $location.absUrl()

这是一个示例，说明如何从服务器端参数设置客户端参数:

var app = angular.module('YOURAPPNAME', []);

app.run(['$location', function($location) {
  // I'm going to fake out the url so it runs in the SnippetEditor.
  var url = "example.com/path/to/app?returnUrl=/original/location/#!/login"; //$location.absUrl();
  var hashbangIdx = url.indexOf('#!');
  var serverStr = hashbangIdx > -1 ? url.substring(0, hashbangIdx) : url;
  var qIdx = serverStr.indexOf("?");
  var p = qIdx > -1 ? serverStr.substring(qIdx).split(/[&||?]/) : [];
  for (var i = 0; i < p.length; i += 1) {
    if (p[i].indexOf('=') > -1) {
      var param = p[i].split('=');
      $location.search(param[0], param[1]);
    }
  }
}]);

app.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {
  $scope.params = $location.search();
}]);
<!DOCTYPE html>
<html ng-app="YOURAPPNAME">

<head>
  <meta charset="utf-8" />
  <title>AngularJS</title>
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h4>Parameters:</h4>
  <p ng-repeat="(name, val) in params">
    {{name}}: {{val}}
  </p>
</body>

</html>

关于javascript - Angular JS : URL parameter appears before the `#!/` and doesn't appear in $location. 搜索()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44160530/

26 4 0
文章推荐： javascript - 强制执行不会静默失败的不变性或部分不变性
文章推荐： javascript - 在 Javascript 类中声明函数的最佳方式是什么？
文章推荐： javascript - ES6 生成器机制 - 传递给 next() 的第一个值去哪里了？
文章推荐： javascript - 在 DrawerNavigator 中使用屏幕选项传递 Prop
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com