在AngularJS中读取查询参数最简洁的方法是什么?

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

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

不出所料，地点。搜索是"?target=bob"。关于访问target的值，我在网上找到了很多例子，但是在AngularJS 1.0.0rc10中都不行。特别地，下面这些都是未定义的:

location.search.target美元 $ location.search['目标'] $ location.search()(“目标”)

有人知道怎样做有效吗?(我使用$location作为参数到我的控制器)

更新:

我在下面发布了一个解决方案，但我并不完全满意。在开发者指南:Angular Services: Using $location中的文档中，关于$location声明如下:

什么时候我应该使用$location? 当您的应用程序需要对当前的变化做出反应时 URL或如果您想更改浏览器中的当前URL。

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的方法，或者有一个简洁的替代方法?

当前回答

你可以在你的控制器中注入$routeParams (require ngRoute)。下面是文档中的一个例子:

// 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中可用)获取和设置查询参数，特别是它的搜索方法:$location.search()。

$routeParams在控制器初始加载后就不那么有用了;$location.search()可以在任何时候调用。

2012-06-16 14:57:17

其他回答

有点晚了，但我觉得你的问题是你的网址。如果不是

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

你有

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

我很确定那会有用的。Angular对它的#/非常挑剔

2016-03-10 16:49:00

埃利斯·怀特黑德的回答很精确。美元locationProvider.html5Mode(真正的);如果没有使用<base href="">标记或将参数requireBase设置为false，则在angularjs的新版本中不能正常工作

医生说:

如果你配置$location使用html5Mode(history.pushState)，你需要为应用程序指定一个带有标记的基URL，或者通过传递一个带有requireBase:false的定义对象给$locationProvider.html5Mode()来配置$locationProvider不需要基标记:

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

2016-02-11 12:44:37

你可以在你的控制器中注入$routeParams (require ngRoute)。下面是文档中的一个例子:

// 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中可用)获取和设置查询参数，特别是它的搜索方法:$location.search()。

$routeParams在控制器初始加载后就不那么有用了;$location.search()可以在任何时候调用。

2012-06-16 14:57:17

你也可以使用$location.$$search.yourparameter

2013-08-05 11:17:00

我发现对于一个SPA HTML5Mode会导致大量的404错误问题，并且没有必要使$location。在这种情况下搜索工作。在我的例子中，我想在用户访问我的网站时捕获一个URL查询字符串参数，而不管他们最初链接到哪个“页面”，并且能够在他们登录后将他们发送到该页面。我只需要在app。run中捕获这些东西

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

然后在登录后我可以说 (state.go美元rootScope。initialPage rootScope.initialParams美元)

2018-01-11 00:51:35

在AngularJS中读取查询参数最简洁的方法是什么?

推荐文章

最新文章

标签