我想使用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的方法，或者有一个简洁的替代方法?
很好，你已经设法让它在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>
很好，你已经设法让它在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>
有两种方法:
使用$ 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;
}
使用$ 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'
}
为了部分回答我自己的问题，这里有一个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 Services: Using $location(奇怪的是我的谷歌搜索没有找到这个…)
