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

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

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

正如预期的那样，location.search是"?target=bob"。 对于访问目标的值，我在网上找到了各种例子，但它们都不能在AngularJS 1.0.0rc10中使用。特别地，以下都是undefined:

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

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

更新:

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

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

任何时候你的应用程序需要对当前的变化做出反应

. URL或如果您想更改浏览器中的当前URL

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

所以:有没有比我的回答更好的方法来使用$location，或者有一个简洁的替代方法?

332137 次浏览
小开

你可以在控制器中注入routeParams美元(需要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'}

编辑:你还可以使用美元的位置服务(在ng中可用)获取和设置查询参数，特别是它的search方法:$ location.search ()。

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

小开

为了部分回答我自己的问题，这里有一个HTML5浏览器的工作示例:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">


Target: \{\{target}}<br/>


</body>
</html>

关键是像上面那样调用$locationProvider.html5Mode(true);。它现在在打开http://127.0.0.1:8080/test.html?target=bob时工作。我对它不能在旧的浏览器中工作感到不高兴，但无论如何我都可能使用这种方法。

另一种适用于旧浏览器的替代方法是放弃html5mode(true)调用，而是使用以下地址加散列+斜杠:

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

相关文档位于开发者指南:Angular服务:Using $location(奇怪的是，我的谷歌搜索没有找到这个…)

小开

很好，你已经设法让它在html5模式下工作，但也可以让它在hashbang模式下工作。

你可以简单地使用:

$location.search().target

访问'target'搜索参数。

作为参考，这里是工作的jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

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


function MyCtrl($scope, $location) {


$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);


$scope.changeTarget = function(name) {
$location.search('target', name);
}
}
<div ng-controller="MyCtrl">


<a href="#!/test/?target=Bob">Bob</a>
<a href="#!/test/?target=Paul">Paul</a>
    

<hr/>
URL 'target' param getter: \{\{target}}<br>
Full url: \{\{location.absUrl()}}
<hr/>
    

<button ng-click="changeTarget('Pawel')">target=Pawel</button>
    

</div>

小开

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

小开

总结一下。

如果你的应用是从外部链接加载的，那么angular不会将其检测为URL更改，因此$loaction.search()会给你一个空对象。要解决这个问题，你需要在应用程序配置中设置以下参数(app.js)

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider)
{
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});


$locationProvider.html5Mode(true);
}]);
小开

$location.search()将只在HTML5模式开启和支持浏览器的情况下工作。

这将永远工作:

window.location.search美元

小开

有两种方法:

  1. 使用$routeParams
最好的和推荐的解决方案是使用$routeParams到你的控制器。 它需要安装ngRoute模块 
   function MyController($scope, $routeParams) {
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
var search = $routeParams.search;
}
  1. 使用$location.search()。

这里有一个警告。它只适用于HTML5模式。默认情况下，它不适用于没有哈希值(#)的URL http://localhost/test?param1=abc&param2=def

你可以通过在URL中添加#/来让它工作。http://localhost/test#/?param1=abc&param2=def

$location.search()返回如下对象:

{
param1: 'abc',
param2: 'def'
}
小开

埃利斯·怀特黑德的回答很精确。如果没有为应用程序指定带有<base href="">标记的基URL或将参数requireBase设置为false， $locationProvider.html5Mode(true);将无法在新版本的angularjs中工作

来自医生:

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

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

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

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

你有

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

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

小开

我发现对于一个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美元)< / p >


提交答案