如何使用AngularJS读取URL查询参数？

24 浏览
0 Comments

如何使用AngularJS读取URL查询参数？

我想使用AngularJS获取特定URL参数的值，然后将特定的值赋给特定的文本框。

一个示例URL可能如下所示：

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

我看到了关于$location、路由和服务的示例。我不想使用它们。我只需要param1的值。有没有什么办法可以实现这个？

这里有一个对应的jsfiddle.net链接，里面包含了几个尝试：http://jsfiddle.net/PT5BG/211/

0

3 答案

0 Comments

问题出现的原因是用户想要在AngularJS中读取URL查询参数，但不清楚如何处理。下面是解决该问题的方法：

1. 如果使用ngRoute，请查看$routeParams。

2. 如果使用ui-Router，请查看stateParams。

3. 如果没有使用路由，可以使用以下JavaScript代码来读取URL查询参数：

var key = 'param1';
var value = window.location.search.substring(window.location.search.indexOf(key)+key.length+1);

以上是解决该问题的方法。

0
0 Comments

问题的出现原因是在AngularJS中如何读取URL查询参数。解决方法是使用$location对象来读取URL查询参数。如果html5mode设置为true，则$location.search().param1;可以获取查询参数。否则，必须使用纯JavaScript来获取查询参数。可以参考这个链接：How can I get a specific parameter from location.search?。对于html5mode，$locationProvider.html5Mode(true).hashPrefix('!')这一行代码的作用是启用html5模式，并设置hash前缀为'!'。不清楚hashbang的用途是什么。我将会使用问号来分隔URL的键值对。

0
0 Comments

如何使用AngularJS读取URL查询参数？

问题的原因：

在上述代码中，使用了AngularJS的$routeParams对象来获取URL参数的值。但是，由于WordPress会先处理URL，所以直接使用$routeParams对象来获取URL查询参数的值是无效的。因此，需要使用URL查询参数的方式来解决这个问题。

解决方法：

1. 首先，在AngularJS的$routeProvider配置中，将路由的URL模式修改为使用查询参数的方式，而不是使用路径参数的方式。

例如，将以下代码：

.when('/route1/:param', {
    templateUrl: 'your_url1',
    controller: 'RouteController'
})

修改为：

.when('/route1', {
    templateUrl: 'your_url1',
    controller: 'RouteController'
})

2. 接下来，在控制器中使用$location服务的search()方法来获取URL查询参数的值。

例如，将以下代码：

module.controller("RouteController", function($scope, $routeParams) {
    $scope.param = $routeParams.param;
    alert($scope.param);
})

修改为：

module.controller("RouteController", function($scope, $location) {
    $scope.param = $location.search().param;
    alert($scope.param);
})

通过以上修改，就可以使用AngularJS读取URL查询参数了。

0