在 AngularJS 中读取查询参数的最简洁方法是什么? [英] What's the most concise way to read query parameters in AngularJS?

问题描述

我想使用 AngularJS 读取 URL 查询参数的值.我正在使用以下 URL 访问 HTML:

I'd like to read the values of URL query parameters using AngularJS. I'm accessing the HTML with the following URL:

http://127.0.0.1:8080/test.html?target=bob

正如预期的那样，location.search 是 "?target=bob".为了访问 target 的值，我在网上找到了各种示例，但它们都不适用于 AngularJS 1.0.0rc10.特别是以下都是undefined:

As expected, location.search is "?target=bob". For accessing the value of target, I've found various examples listed on the web, but none of them work in AngularJS 1.0.0rc10. In particular, the following are all undefined:

• $location.search.target
• $location.search['target']
• $location.search()['target']

有人知道什么会起作用吗?(我使用 $location 作为控制器的参数)

Anyone know what will work? (I'm using $location as a parameter to my controller)

更新:

我在下面发布了一个解决方案，但我对此并不完全满意.开发人员指南:Angular 服务:使用 $location 中的文档说明了有关 $location 的以下内容:

I've posted a solution below, but I'm not entirely satisfied with it. The documentation at Developer Guide: Angular Services: Using $location states the following about $location:

我应该什么时候使用 $location?

When should I use $location?

任何时候您的应用程序需要对当前的变化做出反应URL 或者如果您想更改浏览器中的当前 URL.

Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.

对于我的场景，我的页面将从带有查询参数的外部网页打开，因此我本身不会对当前 URL 的更改做出反应".所以也许 $location 不是适合这项工作的工具(有关丑陋的细节，请参阅下面的答案).因此，我将这个问题的标题从如何使用 $location 读取 AngularJS 中的查询参数?"到在 AngularJS 中读取查询参数的最简洁方法是什么?".显然，我可以只使用 javascript 和正则表达式来解析 location.search，但是对于如此基本的东西进行如此低级的处理确实冒犯了我的程序员的敏感性.

For my scenario, my page will be opened from an external webpage with a query parameter, so I'm not "reacting to a change in the current URL" per se. So maybe $location isn't the right tool for the job (for the ugly details, see my answer below). I've therefore changed the title of this question from "How to read query parameters in AngularJS using $location?" to "What's the most concise way to read query parameters in AngularJS?". Obviously I could just use javascript and regular expression to parse location.search, but going that low-level for something so basic really offends my programmer sensibilities.

那么:是否有比我在回答中更好的使用 $location 的方法，或者是否有简洁的替代方法?

So: is there a better way to use $location than I do in my answer, or is there a concise alternate?

推荐答案

你可以注入 $routeParams(需要 ngRoute)到您的控制器中.以下是文档中的示例:

You can inject $routeParams (requires ngRoute) into your controller. Here's an example from the docs:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

您还可以使用 $location 服务(在 ng 中可用)，特别是它的 search 方法:$location.search().

You can also get and set query parameters with the $location service (available in ng), particularly its search method: $location.search().

$routeParams 在控制器初始加载后就没那么有用了；$location.search() 可以随时调用.

$routeParams are less useful after the controller's initial load; $location.search() can be called anytime.

这篇关于在 AngularJS 中读取查询参数的最简洁方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！