ui-srefui-router を使用して遷移したい状態に 2 つのパラメータを渡して受け取る必要があります。
およびパラメータを使用して状態を に遷移するには、以下のリンクを使用するようなものですhome。foobar
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
コントローラーでの受信fooと値:bar
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
コントローラーで取得しますundefined。$stateParam
誰か、それをどうやってやるのか教えてくれませんか?
編集：
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
'A@home': {
templateUrl: 'a.html',
controller: 'MainCtrl'
},
'B@home': {
templateUrl: 'b.html',
controller: 'SomeController'
}
}
});
ベストアンサー1
私は例方法を示します。更新された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',
},
...
パラメータに使用可能な設定については、$stateProvider
以下は抜粋です
- value - {object|function=} : このパラメータのデフォルト値を指定します。これにより、このパラメータは暗黙的にオプションとして設定されます...
- 配列 - {boolean=}: (デフォルト: false) true の場合、パラメータ値は値の配列として扱われます。
- 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]})">
実際に動作を確認するここ