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

How do I extract query parameters using ui-router for AngularJS?

如何使用ui-router对AngularJS提取查询参数?

In AngularJS' own $location service I did:

在AngularJS的$location服务中，我做到了:

($location.search()).uid

.uid(location.search美元())

to extract the parameter uid from a URL. What is the corresponding code for ui-router?

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

5 个解决方案

#1

Unless you're binding to the query parameters (see the documentation), you don't access them directly through $state or $stateParams. Use the $location service.

除非绑定到查询参数(请参阅文档)，否则不能通过$state或$stateParams直接访问它们。使用美元的位置服务。

EDIT: Per the docs, if you want to capture query parameters in $stateParams, you can append a ? to your url, and name each query parameter, separated by &, i.e. url: "/foo?bar&baz".

编辑:根据文档，如果您想在$stateParams中捕获查询参数，可以添加a ?将每个查询参数命名为&，即url:“/foo?bar&baz”。

#2

See the query parameters section of the URL routing documentation.

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

You can also specify parameters as query parameters, following a '?':

您还可以将参数指定为查询参数，后跟'?':
url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

For this example, if the url is /contacts?myParam=value then the value of $state.params will be:

对于本例，如果url是/contacts?myParam=value，然后是$state的值。参数将会是:

{ myParam: 'value' }

#3

ui-router does not differentiate between different types of parameters in a url like the $location service does.

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

In your controllers you can use the $stateParams service to get access to all the different types of parameters in your url.

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

below is an example from the ui-router wiki:

下面是ui-router中的一个例子:

// 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' }

So in your case to find the uid param simply use:

所以在你的例子中找到uid参数只需要:

$scope.uid = $stateParams.uid

#4

You also need to define the query parameters in the $stateProvider e.g.

您还需要在$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;
  }
})

as explain by benfoster.io

benfoster.io所解释的

#5

You can get it from $stateParams , but in that case you have to declare the query variable in the route as well.

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

declare in route like -

像-一样在路径中声明

url: '/path?name'

for getting name in controller inject $stateParams , and use like -

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

$stateParams.name

stateParams.name美元

#1