如何使用 AngularJS 读取 url 查询参数？
Posted
技术标签:
【中文标题】如何使用 AngularJS 读取 url 查询参数？【英文标题】：How to read url query parameters with AngularJS? 【发布时间】：2015-02-11 21:29:36 【问题描述】：我想使用 AngularJS 获取特定 url 参数的值。然后我想为特定的文本框分配一个特定的值。
示例 URL 可能如下所示：
http://example.com/?param1=value1
我见过有关 $location、路由和服务的示例。我不想做任何事情。我只需要 param1 的值。有什么想法可以做到吗？
这是一个相应的 jsfiddle.net，经过多次尝试：http://jsfiddle.net/PT5BG/211/
【问题讨论】：
【参考方案1】：使用$location是角度的方式
$location.search().param1; 应该给它如果 html5mode=true
否则你必须使用纯javascript。检查这个。 How can I get a specific parameter from location.search?
【讨论】：
对于html5mode，这条线在哪里？ $locationProvider.html5Mode(true).hashPrefix('!') 我不太确定 hashbang 的用途。我将用问号分隔 url 键/值。【参考方案2】：如果您使用的是 ngRoute，请查找 routeParams
如果您使用 ui-Router，请查找 stateParams
JS方式：
var key = 'param1';
var value = window.location.search.substring(window.location.search.indexOf(key)+key.length+1);
【讨论】：
OP 中没有提到路由。【参考方案3】：试试这个。你需要在angular js中路由概念
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<a href="#/route1/abcd">Route 1 + param</a><br/>
<a href="#/route2/1234">Route 2 + param</a><br/>
param
<div ng-view></div>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider)
$routeProvider.
when('/route1/:param',
templateUrl: 'your_url1',
controller: 'RouteController'
).
when('/route2/:param',
templateUrl: 'your_url2',
controller: 'RouteController'
).
otherwise(
redirectTo: '/'
);
]);
module.controller("RouteController", function($scope, $routeParams)
$scope.param = $routeParams.param;
alert($scope.param);
)
</script>
</body>
</html>
$routeParams 允许你输入参数的值
【讨论】：
由于 wordpress 先处理，这行不通。需要是查询参数。以上是关于如何使用 AngularJS 读取 url 查询参数？的主要内容，如果未能解决你的问题，请参考以下文章
使用 AngularJS 读取 GeoJSON 页面 [重复]