web-dev-qa-db-ja.com

AngularJSのUIルーターでクエリパラメーターを抽出する方法

AngularJSで i-router を使用してクエリパラメータを抽出するにはどうすればよいですか？

AngularJSの$locationサービスで私がやった：

（$ location.search（））。uid

uRLからパラメーターuidを抽出します。 ui-routerに対応するコードは何ですか？

javascriptangularjsangular-uiquery-parametersangular-ui-router
61
Per Quested Aronsson

クエリパラメータにバインドしている場合を除き（ドキュメントを参照）、$stateまたは$stateParamsから直接アクセスすることはできません。 $locationサービスを使用します。

EDIT：ドキュメント ごとに、$stateParamsでクエリパラメータをキャプチャする場合は、?をurl、&、つまりurl: "/foo?bar&baz"で区切られた各クエリパラメータに名前を付けます。

54
Nate Abele

RL routing documentation のクエリパラメータセクションを参照してください。

「？」の後に、クエリパラメータとしてパラメータを指定することもできます。

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

この例では、URLが/contacts?myParam=valueの場合、$state.paramsの値は次のようになります。

{ myParam: 'value' }
99
thisgeek

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
9
SStanley

また、$ 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 で説明するように

7
fredtma

$ stateParamsから取得できますが、その場合はルートでクエリ変数も宣言する必要があります。

ルートで宣言する-

url: '/path?name'

コントローラに名前を取得するために$ stateParamsを挿入し、次のように使用します-

$stateParams.name

2
Partha Roy

AngularJSとui-routerの最近のバージョンでは、$stateを使用してパラメーターにアクセスできると思います。

$state.params[<PARAMETER_NAME>]

app.jsでは、次のように状態を定義しました。

.state('app.name', {
    url: '/:some_param_id',
    templateUrl: '/templates/home.html'
})
0
JohnAndrews