方法を示す例を作成しました。更新されたstate
定義は次のようになります。
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
そして、これはコントローラです:
.controller('MainRootCtrl', function($scope, $state, $stateParams) {
//..
var foo = $stateParams.foo; //getting fooVal
var bar = $stateParams.bar; //getting barVal
//..
$scope.state = $state.current
$scope.params = $stateParams;
})
確認できるのは、州の家に次のように定義されたURLがあることです。
url: '/:foo?bar',
つまり、urlのパラメーターは次のように期待されます。
/fooVal?bar=barValue
これらの2つのリンクは、コントローラーに引数を正しく渡します。
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
また、コントローラーはの$stateParams
代わりに消費します$stateParam
。
ドキュメントへのリンク:
ここで確認できます
params : {}
新しい、より詳細な設定もありますparams : {}
。すでに見たように、の一部としてパラメーターを宣言できますurl
。しかし、params : {}
構成を使用して、この定義を拡張したり、URLの一部ではないパラメーターを導入したりすることもできます。
.state('other', {
url: '/other/:foo?bar',
params: {
// here we define default value for foo
// we also set squash to false, to force injecting
// even the default value into url
foo: {
value: 'defaultValue',
squash: false,
},
// this parameter is now array
// we can pass more items, and expect them as []
bar : {
array : true,
},
// this param is not part of url
// it could be passed with $state.go or ui-sref
hiddenParam: 'YES',
},
...
paramsに使用可能な設定は、$ stateProviderのドキュメントに記載されています
以下は抜粋です
- value-{object | function =}:このパラメーターのデフォルト値を指定します。これは暗黙的にこのパラメーターをオプションとして設定します...
- array-{boolean =}:(デフォルト:false)trueの場合、param値は値の配列として扱われます。
- squash-{bool | string =}: squashは、現在のパラメーター値がデフォルト値と同じである場合に、URLでデフォルトパラメーター値がどのように表されるかを構成します。
これらのパラメーターを次のように呼び出すことができます。
// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">
ここで実際に確認してください
url:'.../home/:foo/:bar