ui-router で ui-sref を使用してコントローラーにパラメーターを渡すにはどうすればよいですか?

ui-router で ui-sref を使用してコントローラーにパラメータを渡す

ui-router で、ui-sref を使用して状態に遷移するコントローラーにパラメーターを渡すことができます。明確にするために、2 つのパラメータ「foo」と「bar」をターゲット状態に送受信できます。

状態定義

受け入れるように状態定義を更新します。 URL 内のパラメータ:

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'
        }
      }
    });

コントローラーConsumption

コントローラー内で、$stateParams からパラメーターを取得します。

  .controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
  })

Link Generation

パラメーターを渡すには、次を使用します。この構文:

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">

これは、指定された foo パラメーターと bar パラメーターを持つ 'home' 状態。$stateParams を介してコントローラーでアクセスできます。

パラメーターのカスタマイズ (オプション)

状態定義の「params」プロパティを使用すると、パラメータの動作をさらに構成できます:

  $stateProvider
    .state('other', {
      url: '/other/:foo?bar',
      params: {
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        bar: {
          array: true,
        },
        hiddenParam: 'YES',
        // (not in URL)
      }
    });

パラメータ設定include:

• value: デフォルト値
• array: パラメータ値を配列として扱う
• squash: URL でのデフォルト値表現を制御

パラメータインジェクション

コントローラパラメータの注入は $stateParams 経由で行われます。次のコマンドを使用して値を取得できます。

var paramValue = $stateParams.paramName;

これは、UI ルーターが ui-sref を使用して状態間のパラメーターの受け渡しを可能にし、コントローラーでの状態遷移とパラメーターへのアクセスを容易にする方法です。

以上がui-router で ui-sref を使用してコントローラーにパラメーターを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。