[解決済み] ui-routerでui-srefを使用してパラメータをコントローラに渡す方法

質問

トランジットしたい状態に対して、2つのパラメータを ui-sref のui-routerを使用します。

に状態を遷移させるために、以下のリンクを使うようなものです。 home と foo と bar パラメータを指定します。

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

});

解決方法は？

私は 例 を紹介します。更新情報 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; 
})

これでわかることは、state homeのurlが次のように定義されていることです。

url: '/:foo?bar',

ということは、URLのパラメータは

/fooVal?bar=barValue

これら二つのリンクは、コントローラに正しく引数を渡します。

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">

また、コントローラは $stateParams の代わりに $stateParam .

docへのリンクです。

• URL パラメータ

確認することができます こちら

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&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

動作確認 こちら