如何在 ui-router 中使用 ui-sref 将参数传递给控制器​​？

在 ui-router 中使用 ui-sref 将参数传递给控制器​​

在 ui-router 中，使用 ui-sref 转换到某个状态允许将参数传递给控制器​​。澄清一下，您可以向目标状态发送和接收两个参数“foo”和“bar”。

状态定义

更新状态定义以接受URL 中的参数：

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

Controller消耗

在控制器内，从 $stateParams 检索参数：

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

链接生成

要传递参数，请使用这个语法：

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

这将转换到“home”状态指定的 foo 和 bar 参数，然后可以通过 $stateParams 在控制器中访问这些参数。

自定义参数（可选）

状态中带有“params”属性定义，您可以进一步配置参数行为：

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

参数设置include:

• 值：默认值
• 数组：将参数值视为数组
• squash：控制URL中的默认值表示

参数注入

控制器参数注入是通过$stateParams。您可以使用以下方式检索值：

var paramValue = $stateParams.paramName;

这就是 UI-router 如何使用 ui-sref 启用状态之间的参数传递，以便在控制器中轻松进行状态转换和参数可访问。

以上是如何在 ui-router 中使用 ui-sref 将参数传递给控制器​​？的详细内容。更多信息请关注PHP中文网其他相关文章！