67

如何使用AngularJS的 ui-router提取查询参数？

在 AngularJS 自己的$location服务中，我做了：

($location.search()).uid

从 URL 中提取参数 uid。ui-router对应的代码是什么？

4

6 回答 6

103

请参阅URL 路由文档的查询参数部分。

您还可以在“？”之后将参数指定为查询参数：

url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

对于此示例，如果 url 是，/contacts?myParam=value那么 的值$state.params将是：

{ myParam: 'value' }
于 2013-11-23T16:58:06.933 回答
59

除非您绑定到查询参数（请参阅文档），否则您不能直接通过$stateor访问它们$stateParams。使用$location服务。

编辑：根据文档，如果您想在 中捕获查询参数$stateParams，可以将 a 附加?到您的url, 并命名每个查询参数，用&, 即url: "/foo?bar&baz".

于 2013-09-27T22:07:59.303 回答
10

ui-router 不像 $location 服务那样区分 url 中不同类型的参数。

在您的控制器中，您可以使用 $stateParams 服务来访问 url 中所有不同类型的参数。

以下是来自 ui-router wiki 的示例：

// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'

// Your $stateParams object would be
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

所以在你的情况下找到 uid 参数只需使用：

$scope.uid = $stateParams.uid
于 2015-12-10T01:13:29.180 回答
9

您还需要在 $stateProvider 中定义查询参数，例如

state('new-qs', {
  url: '/new?portfolioId&param1&param2',
  templateUrl: 'new.html',
  controller: function($scope, $stateParams) {
     $scope.portfolioId = $stateParams.portfolioId;
     $scope.param1 = $stateParams.param1;
     $scope.param2 = $stateParams.param2;
  }
})

正如benfoster.io解释的那样

于 2016-01-07T13:22:58.180 回答
3

您可以从 $stateParams 获取它，但在这种情况下，您还必须在路由中声明查询变量。

在路线中声明 -

url: '/path?name'

在控制器中获取名称注入 $stateParams ，并使用 -

$stateParams.name

于 2017-05-23T12:31:21.680 回答
0

对于 AngularJS 和 ui-router 的最新版本，我认为您可以只使用$state来访问参数：

$state.params[<PARAMETER_NAME>]

在 app.js 中，您将状态定义如下：

.state('app.name', {
    url: '/:some_param_id',
    templateUrl: '/templates/home.html'
})
于 2019-01-17T16:06:11.213 回答