Angularjs $location 服务显然没有解析 url？答案

【问题标题】：Angularjs $location service apparently not parsing url?Angularjs $location 服务显然没有解析 url？
【发布时间】：2013-04-23 16:22:57
【问题描述】：

我在一个应用程序中使用 Angular，它基本上是一个带有搜索结果的表格。可以通过像http://myapp/?client=clientName这样的url来访问这个表

为表格实例化一个角度控制器，除其他外，用于打开带有行详细信息的模态对话框（也是基于角度的 bootstrap-ui）。

这些行详细信息是通过一个服务带来的，该服务对两个控制器都有一些共同的功能：一个用于表格，一个用于模式。

现在，在这项服务中，我有以下 sn-p 需要检索：

service.fetchRelatedElements = function(element, cb) {
  var url = '/search.json?results=20&type='+element.type;
  if ($location.search()['client']) {
    url += '&client=' + $location.search('client');
  }
  return doFetch(url, cb); // actual server json GET
};

目标是知道表是否已经有这个特定的client 参数集作为过滤器。

如果我在此调用的开头放置一个断点，我会看到 $location.absUrl() 返回当前浏览器 URL（在我的例子中，它具有我感兴趣的 client 参数）。

但是$location.search() 返回一个空对象。

我正在使用默认值在我的服务中注入 $location 服务（也就是说，不是通过.config() 调用来配置它）。而且，正如医生所说：

$location 服务解析浏览器地址栏中的 URL（基于在 window.location 上）并使 URL 可用于您的应用。

我错过了什么吗？此时不应该解析 URL 吗？

谢谢！

更新：我已经成功了。问题正是我根本没有配置服务。我这样做是因为我认为这样会采用默认值，但它似乎不是这样工作的。

【问题讨论】：

你能分享 $location.absUrl() 的输出吗？这闻起来像一个正则表达式问题。
当然！这是http://localhost:3000/results?utf8=%E2%9C%93&client=mond&type=&submittedLowerBound=&submittedUpperBound=&commit=Filter。这是后端的 Rails 应用程序。
你能分享一些你的解决方案的代码吗？我有同样的问题 $location.search() 返回 {}

标签： javascript service angularjs location

【解决方案1】：

在我的应用程序模块配置中配置 $locationProvider 之前，我遇到了同样的问题：

appModule.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);

【讨论】：

这样，如果浏览器不支持 html5 模式，angular 将回退到 hashbang url，顺便说一句，有人知道如何在没有 html5 模式和 angular 路由器的情况下获取查询参数？
另请注意，当您将其设置为html5Mode时，您的html文件中还必须有一个基本标记。
另请注意，您可能需要添加$locationProvider.hashPrefix(''); docs.angularjs.org/guide/migration#commit-aa077e8

【解决方案2】：

如果不想指定base标签，可以指定require base false。

myapp.config(function($locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
});

【讨论】：

【解决方案3】：

当我遇到这个问题时，除了设置配置之外对我有用的另一件事是在查询字符串前面添加“#”。

因此，如果您是创建查询字符串的人，则更改
myapp/?client=clientName
致
myapp/<strong>#</strong>?client=clientName

允许 $location.search() 给我一个非空对象，然后您可以使用 $location.search()['client'] 访问每个参数

【讨论】：

谢谢。此评论应在官方文档中。 :)

【解决方案4】：

$location.search 的 API 相当混乱。调用

$location.search('client');

会将搜索对象设置为 {client: true} 并返回 $location。此外，您有一个错字client 而不是'client'，因此它将搜索设置为一个空对象。所以你可能想要：

url += '&client=' + $location.search()['client'];

【讨论】：

谢谢，Jmr，我修正了错字。但重要的是，此时$location.search() 只返回{}。
对不起，我错过了你在问题的开头放置了断点，我想也许 $location.search(client) 覆盖了它。在那种情况下，我不确定发生了什么， $location.search() 在我的机器上解析你的 URL。

【解决方案5】：

你可以根据这个评论https://github.com/angular/angular.js/issues/7239#issuecomment-42047533编写解析$window.location.search的函数

function parseLocation(location) {
    var pairs = location.substring(1).split("&");
    var obj = {};
    var pair;
    var i;

    for (i in pairs) {
        if (pairs[i] === "")
            continue;

        pair = pairs[i].split("=");
        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }

    return obj;
}

$scope.query = parseLocation($window.location.search)['query'];

【讨论】：