在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作为我的控制器的参数）
更新：
我已经发布了一个解决scheme，但我并不完全满意。 开发人员指南中的文档：Angular Services：使用$ location指出以下有关$location ：
我应该何时使用$ location？
任何时候你的应用程序需要对当前URL中的变化做出反应，或者如果你想改变浏览器中的当前URL。
对于我的情况，我的页面将从一个带有查询参数的外部网页打开，所以我不是“对当前URL的改变做出反应”。 所以也许$location不是正确的工具（丑陋的细节，请参阅下面的答案）。 因此，我已经把这个问题的标题从“如何使用$ location读取AngularJS中的查询参数？ 到“在AngularJS中读取查询参数的最简洁的方法是什么？”。 很明显，我可以使用JavaScript和正则expression式来parsinglocation.search ，但是如此低级的东西基本上会触犯我的程序员的敏感性。
所以：有没有更好的方法来使用$location比我在我的答案，还是有一个简洁的替代？
你可以注入$ 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模式工作，但它也可以使其工作在hashbang模式。
你可以简单地使用：
$location.search().target
访问“目标”search参数。
作为参考，这里是工作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>
为了给我自己的问题提供一个部分的答案，下面是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)调用，并使用下面的地址和hash + slash：
http://127.0.0.1:8080/test.html#/?target=bob
相关的文档在开发指南：Angular Services：使用$ location （奇怪的是我的谷歌search没有find这个…）。
这可以通过两种方式来完成：
- 使用
$routeParams
最好的和推荐的解决scheme是使用$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; }
- 使用
$location.search()。
这里有一个警告。 它只能用于HTML5模式。 默认情况下，对于没有哈希（ # ）的URL不起作用http://localhost/test?param1=abc¶m2=def
您可以通过在URL中添加#/来使其工作。 http://localhost/test#/?param1=abc¶m2=def
$location.search()返回一个对象，如：
{ param1: 'abc', param2: 'def' }
$ location.search（）只能在启用了HTML5模式的情况下工作，并且只能在支持浏览器的情况下使用。
这将始终工作：
$ window.location.search
只是为了总结。
如果你的应用程序正在从外部链接加载，那么angular度不会检测到这是一个URL更改，所以$ loaction.search（）会给你一个空的对象。 为了解决这个问题，你需要在你的appconfiguration文件（app.js）
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]);
你也可以使用$ location。$$ search.yourparameter
这可能会帮助你
在AngularJS中读取查询参数最简单的方法是什么？
// 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'} <!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> ($location.search()).target
对埃利斯怀特海德的答案只是一个精确。 $locationProvider.html5Mode(true); 将无法使用新版本的angularjs，而无需使用<base href="">标记指定应用程序的基本URL或将参数requireBase设置为false
从文档 ：
如果将$ locationconfiguration为使用html5Mode（history.pushState），则需要使用标记指定应用程序的基本URL，或者将$ locationProviderconfiguration为不需要基本标记，方法是将具有requireBase：false的定义对象传递给$ locationProvider。 html5Mode（）：
$locationProvider.html5Mode({ enabled: true, requireBase: false });
这有点晚，但我认为你的问题是你的url。 如果不是
http://127.0.0.1:8080/test.html?target=bob
你有过
http://127.0.0.1:8080/test.html#/?target=bob
我很确定它会工作。 angular度是真的挑剔其＃/
