如何使用 AngularJS 读取 url 查询参数？答案

【问题标题】：How to read url query parameters with AngularJS?如何使用 AngularJS 读取 url 查询参数？
【发布时间】：2015-02-11 21:29:36
【问题描述】：

我想使用 AngularJS 获取特定 url 参数的值。然后我想为特定的文本框分配一个特定的值。

示例 URL 可能如下所示：

http://example.com/?param1=value1

我见过有关 $location、路由和服务的示例。我不想做任何事情。我只需要 param1 的值。有什么想法可以做到吗？

这是一个相应的 jsfiddle.net，经过多次尝试：http://jsfiddle.net/PT5BG/211/

【问题讨论】：

标签： angularjs

【解决方案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 先处理，这行不通。需要是查询参数。